{"columns":["path","title","version","breadcrumbs","lastModified","designowner","uielementstechnology","elementtype","uielementscategory","elementstatus","description","intro-desc","image","intro-image","page-tabs","visibility","saptheme"],"data":[{"path":"/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools","title":"resources-and-tools","version":"","breadcrumbs":"","lastModified":1777125020,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777125014,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy","title":"sap-design-system-academy","version":"","breadcrumbs":"","lastModified":1777124986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/figma","title":"Figma","version":"","breadcrumbs":"SAP Design System Academy / Resources and Tools / Figma","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Get started with Figma or deepen your expertise.","intro-desc":"This guide will help you work with Figma – no matter whether you’re an intermediate, a pro or if you’re only just getting started. These trainings focus on content that is provided by Figma directly or from our colleagues.","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/media_10000f15a310a401c3a2f5b3f93db848db51e199e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/community","title":"Community","version":"","breadcrumbs":"SAP Design System Academy / Community","lastModified":1777124987,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Reach out to the SAP design community and share your suggestions for future training offerings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/media_145a2f0a5981080bb58555d630642f9c32f035a2f.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/sap-fiori-design-guideline-training","title":"SAP Fiori Design Guideline Training","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Basics / SAP Fiori Design Guideline Training","lastModified":1782336407,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to create a design that follows the SAP Fiori design guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics","title":"sap-design-system-basics","version":"","breadcrumbs":"","lastModified":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials","title":"sap-design-system-essentials","version":"","breadcrumbs":"","lastModified":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/ux-consistency","title":"UX Consistency Training","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Basics / UX Consistency Training","lastModified":1782336407,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Develop awareness of UX consistency concepts and learn how to apply them in practice.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/components-basics","title":"Component Basics","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Basics / Component Basics","lastModified":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different facets of a component in the SAP Design System.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/media_172ae8dcabafeb299d731efd41e0370eb1a9deed1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/innersource-in-action","title":"InnerSource in Action – A Video Series","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Essentials / InnerSource in Action – A Video Series","lastModified":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In June 2024, the InnerSource Process for Web was introduced. But what exactly is InnerSource? Who are the key players involved? And how does the ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/media_1f45fe7346b5f8cf2634cb96f68f0b3a07e66b568.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/sap-web-ui-kit","title":"SAP Web UI Kit","version":"","breadcrumbs":"SAP Design System Academy / Resources and Tools / SAP Web UI Kit","lastModified":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Get an introduction to the foundations and components that come with the SAP Web UI Kit.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/media_17d58ef83450cb3b422d46c18e4f26d6c21c3607e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web","title":"SAP Fiori for Web","version":"latest","breadcrumbs":"","lastModified":1777124986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori user interface for web apps. Learn how to design engaging and intuitive app that can run on any device.","intro-desc":"","image":"https://www.sap.com/design-system/media_1ee9b153315b474fc847766c10a4f9ca4c99904d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/foundations/ux-design","title":"UX Design","version":"","breadcrumbs":"SAP Design System Academy / Foundations / UX Design","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Choose UX design learning content based on your experience level, from beginner to expert.","intro-desc":"The aim of user experience design is to increase delight and productivity in every touchpoint of the customer journey. It’s to create usable, accessible, and engaging experiences that help every user to get their work done faster, in a more intuitive way, and with better business outcomes than before. This is why user-centered design is identified as one of the most important skills that form the baseline across SAP Product Engineering and Technology & Innovation.","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/foundations/media_1bdc9e47df3a6c9665c4285e42cfef3c5093c6838.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/get-started","title":"Get Started","version":"latest","breadcrumbs":"","lastModified":1777125020,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Overview of the training topics, including the latest training offerings and events.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/media_1c52fcd939421ff6ba72279ec0ce7564f8330dd1d.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/foundations/inclusive-design","title":"Accessibility","version":"","breadcrumbs":"SAP Design System Academy / Foundations / Accessibility","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Discover the training offerings for different aspects of inclusive design.","intro-desc":"Accessibility refers to the possibility for everyone, including and especially for people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Design System and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/foundations/media_118b9b95c028142057662c0ef44e578024f610a72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/designer-toolkit","title":"Designer Toolkit","version":"","breadcrumbs":"SAP Design System Academy / Resources and Tools / Designer Toolkit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Access assets for your prototypes, including Font 72, SAP icons, and UI kits.","intro-desc":"The SAP design system offers various resources and services to support you in doing your work. Wouldn’t it be cool to have access to ready-to-use assets to create designs more quickly or to get tools that help you in producing consistent and accessible deliverables easily? The following list will exactly provide you with such resources.","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/media_1d370acbd2464fa8dcdb67c95b44e7de974e11ef3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/foundations/theming","title":"Theming","version":"","breadcrumbs":"SAP Design System Academy / Foundations / Theming","lastModified":1777125020,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Find out how design tokens are used to create consistent UI themes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/foundations/media_1e411560cc7519894d9c3507cb7a9b88aa057a76a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/the-sap-design-system-overview","title":"The SAP Design System - Overview","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Basics / The SAP Design System – Overview","lastModified":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Find out the benefits of using a design system and how the SAP Design System is structured.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/media_118786419d24b993e6b4dad4790b2a07fde225591.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/illustration-creation-kit","title":"Illustration Creation Kit","version":"","breadcrumbs":"SAP Design System Academy / Resources and Tools / Illustration Creation Kit","lastModified":1777125020,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the Horizon Illustration Creation Kit.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/resources-and-tools/media_1da2500f926c244f98f7a428034843c5d27eab8e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/sap-design-system-glossary","title":"SAP Design System Glossary","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Basics / Glossary","lastModified":1782336408,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Understand the terms used in the SAP Design System.","intro-desc":"The following terms are relevant for understanding the SAP design system. Terms are listed alphabetically.","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-basics/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/design-is-people-podcast-series","title":"Design Is People – The SAP Design System Podcast","version":"","breadcrumbs":"SAP Design System Academy / Design Is People – Podcast Series","lastModified":1777125014,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Get to know the people behind the SAP Design System.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/media_1976e3f7da8bfdadf4ef77fdc0a1c23f016654d0a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1782338506,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/community","title":"community","version":"","breadcrumbs":"","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover","title":"discover","version":"","breadcrumbs":"","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136","title":"v1-136","version":"","breadcrumbs":"","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1782338504,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/search","title":"Search Results","version":"","breadcrumbs":"","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/media_1ee1a9bb39a7ff19fee1851d17f6f1d33267a3adc.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/community/contact-us","title":"Ask the Community","version":"","breadcrumbs":"Community / Ask the Community","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/sap-design-system-essentials-overview","title":"SAP Design System Essentials","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Essentials / Overview","lastModified":1782336405,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Unlock the full potential of the SAP Design System Essentials! Whether you are a Product Manager, Product Owner, Developer, or UX Designer, our comprehensive training ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown enables the user to view and analyze the data of one key performance indicator.","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/training","title":"training","version":"","breadcrumbs":"","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/training/document","title":"The SAP Fiori web card system streamlines how users access key business insights and actions within their workflows. Designed for flexibility, each card can showcase data from various SAP applications, providing quick, interactive elements like charts, lists, or tables directly within the Fiori launchpad. These cards allow users to stay informed and make real-time decisions without switching between full applications, increasing efficiency and reducing friction in daily tasks.","version":"","breadcrumbs":"","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori web card system streamlines how users access key business insights and actions within their workflows. Designed for flexibility, each card can showcase ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/sap-design-system-essentials-module-3","title":"Tooling","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Essentials / Tooling","lastModified":1777125034,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore how the SAP Web UI Kit can transform your workflow by offering ready-to-use, system-aligned components. It helps designers and developers work faster, reduce inconsistencies, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/media_167b48238d910b1b7092d4b07a6ea61fb93f13e8b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/community/newsletter","title":"Stay Up-To-Date","version":"","breadcrumbs":"Community / Stay Up-To-Date","lastModified":1782338519,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Keep abreast of the developments in the SAP Design System by subscribing to our newsletter and joining the update calls.","intro-desc":"Keep abreast of the developments in the SAP Design System by subscribing to our newsletter and joining the update calls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Analysis Path Framework enables users to create interactive, chart-based analytical drilldown apps for exploring and investigating KPIs from multiple data sources.","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/analytical-frameworks/media_13c0a32cf660ff94271312170ee2634f9f375c3b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/sap-design-system-essentials-module-4","title":"Accessibility and UX Consistency","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Essentials / Accessibility and UX Consistency","lastModified":1777125035,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating inclusive and consistent user experiences is more than good design. It's a responsibility. Accessibility ensures that all users, regardless of ability, can use the ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/media_154851c5dd6b32f0219bb0a80c186075c10ef175c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-learning-series","title":"Design System Learning Series","version":"","breadcrumbs":"SAP Design System Academy / Design System Learning Series","lastModified":1778242690,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System Learning Series provides deep dive info sessions and hands-on jam sessions on all topics covered by the Design System.","intro-desc":"The SAP Design System Learning Series provides deep dive info sessions and hands-on jam sessions on all topics covered by the Design System. View upcoming events and past recordings below.","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/media_1cb96f65bfbcd91d19f2b18707a66a59d6af56ed0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/sap-design-system-essentials-module-2","title":"InnerSource Process for Web","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Essentials / InnerSource Process for Web","lastModified":1777125034,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The InnerSource Process for Web for the SAP Design System that all design teams can collaborate to evolve the design of our product portfolio. Achieving ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/media_1ca807143d0b72507e052b0032f16c79c99bf63db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/sap-design-system-essentials-module-1","title":"Introduction to the SAP Design System","version":"","breadcrumbs":"SAP Design System Academy / SAP Design System Essentials / Introduction to the SAP Design System","lastModified":1777125034,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Discover the SAP Design System and understand how to create well-designed applications that align with the company’s product standards for consistency and accessibility. Learn why ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/sap-design-system-essentials/media_1f6107e9445671210dba519e4ba2e1bf8e022529d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1782338510,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/list-sap-fiori-elements","title":"List","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / List","lastModified":1782338505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements template helps enable the display of a list in the list report","intro-desc":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Intercultural UX – Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural UX – Environment","lastModified":1782338509,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Local factors like technology infrastructure, network connectivity, and power reliability must be considered in UX design to ensure a seamless user experience.","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/replacing-placeholder-text","title":"Replacing Placeholder Text","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Replacing Placeholder Text","lastModified":1782338505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for replacing the placeholder text","intro-desc":"Onscreen text and messages that are familiar to users in their business context simplify their work.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1777125055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/analytical-list-page-overview-page-sap-fiori-elements-2","title":"Analytical List Page / Overview Page","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Analytical List Page / Overview Page","lastModified":1782338523,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This is where you can find all the information about all the design possibilities supported by the templates","intro-desc":"Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates. Consequently, you can find the information for all the design possibilities supported by those templates in the guidelines linked below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1782338506,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications","intro-desc":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1782338510,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section outlines the foundations of the SAP Design System for web applications.","intro-desc":"This section outlines the foundations of the SAP Design System for web applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1782338509,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intercultural UX design ensures usability and positive experiences by considering cultural and contextual differences in business environments.","intro-desc":"Culture, as we understand it, follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis of these webs is concerned with the ways people find meaning in the world.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/get-started","title":"Get Started","version":"","breadcrumbs":"Discover / Get Started","lastModified":1777125051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here you’ll find everything you need to get started designing and building world class SAP apps that bring out the best in every business. The ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/media_1d2aa5e1079563183111d2f311518fae90aaf333a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/list-report-content-area-fiori-elements","title":"List Report – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports simple content layout, multiple view layout, and multiple content layout","intro-desc":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1782338505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s design-led development process uses proven design thinking to ensure consistent, user-focused experiences across all applications and devices.","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/media_1ec9991d1adc6d26c349fbdfe17a171c1c93dc1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1782338507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1782338509,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1782338507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori delivers a consistent, intuitive, holistic, and simple user experience by creating visually appealing designs","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products","title":"sap-products","version":"","breadcrumbs":"","lastModified":1777125055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1777125051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/object-page-content-area-sap-fiori-elements","title":"Object Page – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page content area","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/media_11fd078b8b3628d4618205383af52e7d4aa52da69.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/table-types-sap-fiori-elements","title":"Table Types","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types","lastModified":1782338505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the different table types","intro-desc":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/find-information-and-get-help","title":"Find Information and Get Help","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Find Information and Get, Help","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here, you will find selected information assets to help you:","intro-desc":"Here, you will find selected information assets to help you:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/media_164f2612f4ee06d52fb0f0706dd29206cb033b26b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/get-started/web-components-overview","title":"SAP Web Components","version":"","breadcrumbs":"Discover / Get Started / SAP Web Components","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Web Components are framework-agnostic and can be easily integrated into different web development environments.","intro-desc":"SAP Web Components are framework-agnostic and can be easily integrated into different web development environments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/get-started/media_1abb86ed35a0f913aa78a159004cba123b529880a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/object-page-footer-bar-sap-fiori-elements","title":"Object Page – Footer Bar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Footer Bar","lastModified":1782338523,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page footer","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps provide a seamless, consistent experience across all devices, allowing users to work anywhere, anytime.","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only","title":"sap-s4hana-only","version":"","breadcrumbs":"","lastModified":1777125055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page","title":"object-page","version":"","breadcrumbs":"","lastModified":1777125050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements","lastModified":1782338505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen ...","intro-desc":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen from scratch, you assemble an app from standardized pages that are automatically filled with your business data and actions. The result is a consistent, responsive, and accessible UX that follows SAP Fiori guidelines with far less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists","title":"tables-and-lists","version":"","breadcrumbs":"","lastModified":1777125051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/table-rows-sap-fiori-elements-2","title":"Table Rows","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Rows","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/media_1948a2122825f177b562e760408c8a2a24ccbb7f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1782338508,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/table-features-sap-fiori-elements","title":"Table Features","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Features","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for a table detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for a table detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/media_12321c0a2f81188ad0c3cbe00f0709256c9e04ef2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/integration-of-classic-sap-uis-sap-fiori-elements-list-report","title":"Integration of Classic SAP UIs (SAP Fiori Elements List Report)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Integration of Classic SAP UIs (SAP Fiori Elements List Report)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to navigate and integrate classic UIs for creating, displaying, and editing screens from a list report.","intro-desc":"This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some or all of these actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/media_137a3107e4949629e0dbac7627abd70d05f747730.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1782338509,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, it's important to consider their local meanings to ensure they enhance user experience and business processes.","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/object-page-header-sap-fiori-elements","title":"Object Page – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Header","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/media_1648e6371a26398f6fbedc294b5e47e67b4599684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/product-standards/ux-consistency","title":"UX Consistency","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / UX Consistency","lastModified":1782338510,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design reduces cognitive load and ensures a cohesive, intuitive user experience across all products.","intro-desc":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/terminology-sap-fiori-elements","title":"Terminology for SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Terminology for SAP Fiori Elements","lastModified":1782338505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements help you communicate better with the application developers","intro-desc":"To help you better communicate with application developers, this article presents development and design terms used in the context of SAP Fiori Elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1777125054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report","title":"list-report","version":"","breadcrumbs":"","lastModified":1777125050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/tables-toolbar","title":"Table Toolbar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Toolbar","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/tables-and-lists/media_104a4cc90b3026bd75b11042940583fa5b5548916.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/get-started/ui-elements-overview","title":"UI Elements (SAPUI5)","version":"","breadcrumbs":"Discover / Get Started / UI Elements (SAPUI5)","lastModified":1782338507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori UI elements, including simple, complex, reusable, smart controls, and those supporting assistive technologies.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/object-page-overview-sap-fiori-elements","title":"Object Page – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/object-page/media_1c7f8686593bb09b62b13d2f5fca6e76ae02177fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784263321,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility in SAP Fiori and SAPUI5 ensures inclusive design, with built-in features at the framework level and app-specific adjustments as needed.","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1782338509,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori aims to create intuitive, globally usable software for better usability and acceptance.","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/best-practices-for-designing-sap-fiori-apps","title":"Best Practices for Designing SAP Fiori Apps","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Best Practices for Designing SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about the best practices for designing SAP Fiori Apps","intro-desc":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_1b27db6dd4b6c0eec3b05bd02699ba8e86b44bd1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/sap-fiori","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System / SAP Design System","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System provides a consistent user experience for SAP software across platforms and devices.","intro-desc":"The SAP Design System is a design system that provides a consistent user experience for SAP software across platforms and devices. It’s at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/media_1ebc11fcd0b84ce6782c2d725b67b2ba175adb6bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Cultural Differences in Needs and Behavior","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Cultural Differences in Needs and Behavior","lastModified":1782338508,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cultural factors like norms, beliefs, and technology trends influence how people work and interact, impacting design decisions.","intro-desc":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects may include socio-cultural norms and conditions; beliefs; attitudes to responsibility and taking the initiative; established practices; demographics; and trends in technology. They may also have an impact on design decisions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/smart-templates","title":"SAP Fiori Elements – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements – Overview","lastModified":1777125051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that comprises the most used floorplan templates and is designed to:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/media_190a3003cb2d038be1ebc8c47f84406da50e2cdaf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/worklist-sap-fiori-elements","title":"Worklist","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Worklist","lastModified":1782338524,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings","intro-desc":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/list-report-header-sap-fiori-elements","title":"List Report – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Header","lastModified":1782338591,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","intro-desc":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling","title":"situation-handling","version":"","breadcrumbs":"","lastModified":1777125071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/sap-s4hana-design-decisions","title":"SAP S/4HANA Design Decisions","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Design Decisions","lastModified":1782338573,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Contains all the design decisions for SAP S/4 HANA","intro-desc":"Contains design decisions for SAP S/4HANA. If needed, the respective guideline articles introduce the decisions with SAP S/4HANA Only.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/system-information-bar","title":"System Information Bar","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / System Information Bar","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.","intro-desc":"With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_18b48e4c8f3df79437386c3df6f75f9e1b7fea017.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/situation-handling","title":"Situation Handling","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling helps businesses run smoothly by automatically informing the right users about the issues that require their attention, for example, consumed contracts, pending confirmations ...","intro-desc":"Situation Handling helps businesses run smoothly by automatically informing the right users about the issues that require their attention, for example, consumed contracts, pending confirmations and approvals, deviating deliveries, and upcoming deadlines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/media_173754a7d980d39caa18928049982bdeb292a1b57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling-guidelines","title":"Situation Handling – Guideline Overview","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA Only / Situation Handling – Guideline Overview","lastModified":1785328361,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling ensures smooth business operations by automatically notifying relevant users about critical issues, such as consumed contracts, delivery discrepancies, and impending deadlines.","intro-desc":"Situation Handling ensures smooth business operations by automatically notifying relevant users about critical issues, such as consumed contracts, delivery discrepancies, and impending deadlines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"default","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/learning-journey","title":"Learning Journey","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Learning Journey","lastModified":1782338572,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A collection of learning resources for app designers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/situation-handling-controls","title":"Situation Handling - Controls","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Situation Handling Controls","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually: Initially, users ...","intro-desc":"Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually: Initially, users see the minimal display for a situation. They can seek additional levels of detail about it, according to their needs and goals.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/media_122fa8305bb7a1865512b64dcc67f175f05a449fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/situation-detail-view","title":"Situation Handling - Situation Detail View","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Situation Detail View","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered ...","intro-desc":"The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered the situation.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/media_18ab85828b1b9d5101165d6ea401415b23af397d9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home","title":"SAP S/4HANA Product Home Page – My Home","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Product Home Page – My Home","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP S/4HANA product home page offers enhanced personalization, access to tasks, situations, quick navigation, and analytical insights.","intro-desc":"The SAP S/4HANA product home page is an alternative to the SAP Fiori launchpad My Home page when using SAP S/4HANA Cloud. The previously available SAP Fiori launchpad My Home page is the entry point to a personalized set of apps, presented as tiles or links, whereas the SAP S/4HANA product home page orchestrates much more information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_1d02af60edd7bc80b6a4ce78bb89529b26321609d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design guidelines ensure consistency across products, with additional product-specific guidelines for tailored applications.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_12a7af32dcdde6d1dc193a9433388fe94cfb79fce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/overview-in-a-situations-app","title":"Situation Handling - Overview in a Situations App","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Overview in a Situations App","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Situations app displays all situations in a user’s area of responsibility.","intro-desc":"The Situations app displays all situations in a user’s area of responsibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/situation-handling/media_1958721767ce48195c91982bbba32ffae3ead4544.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Design-Led Development (DLD) process for S/4HANA and DSC enhances UX support, collaboration, and flexibility in design projects.","intro-desc":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_1ae5c2959796dec30e438debe112eb27b08d113ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/foundation","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Foundation","lastModified":1782338513,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the AI color palette for embedded AI and Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/explainable-ai","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/inner-source-process-for-sap-ai-experiences","title":"InnerSource Process for SAP AI Experiences","version":"","breadcrumbs":"","lastModified":1782338677,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/ai-design-contact-us","title":"AI Design – Contact Us","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design – Contact Us","lastModified":1777125084,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to give feedback, get support, and collaborate with the AI Design team.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_1fe63deac4ec22a90fa9acf174e18a5bf4bdd812a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/ranking","title":"Ranking","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/feedback-loop-in-intelligent-systems","title":"User Feedback","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design","lastModified":1782338516,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the guidelines to understand the basic AI design principles and what it takes to craft a good AI experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/ai-design-roadmap","title":"AI Design Roadmap","version":"","breadcrumbs":"","lastModified":1782338677,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1782338518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/whats-new/whats-new-1-124","title":"What’s New in Guideline Version 1.124","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.124","lastModified":1782338503,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.124.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.124.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/whats-new/whats-new-1-136","title":"What’s New in Guideline Version 1.136","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.136","lastModified":1782338503,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.136.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.136.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/whats-new/whats-new-1-128","title":"What’s New in Guideline Version 1.128","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.128","lastModified":1782338503,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.128.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.128.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/joule","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule","lastModified":1782338510,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the icon for SAP's conversational AI panel.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/featured/meet-regenerate","title":"Meet the Regenerate Pattern","version":"","breadcrumbs":"","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All relevant content is now incorporated in the page for the regenerate pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/featured/media_1ffc42d17f9ec0828fb13de32b29ef9ad7f157e2a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/joule-assistant/joule-icon","title":"Joule Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule Assistant / Joule Icon","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Joule icon activates the conversational AI assistant and is also used for SAP marketing purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/joule-assistant/media_17860a9104529f9cdc154fdedcef4ab91212b2119.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/design-principles-for-generative-ai","title":"Design Principles for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Design Principles for Generative AI","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines SAP's generative AI design principles to ensure cohesive, high-quality experiences across all products.","intro-desc":"Generative AI can transform entire industries, and it’s already changing how we live and work. Its ability to generate novel content, whether text, image, data, or video, is a game changer. This technology is rapidly changing how we design, build and interact with software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_15dfc9c807154058f1158664ed9984d7a09553dc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/whats-new/whats-new-1-122","title":"What’s New in Guideline Version 1.122","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.122","lastModified":1782338503,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.122.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.122.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/versioning","title":"SAP Fiori for Web – Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1782338503,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/ai-design-glossary","title":"AI Design Glossary","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design Glossary","lastModified":1782338512,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To provide you with some quick help on AI terminology used in or referred to within our guidelines for ‘Designing Intelligent Systems’, you can find ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/designing-safety-into-gen-ai-experiences","title":"Designing Safety into Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Safety into Generative AI Experiences","lastModified":1782338514,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines best practices for designing reliable, transparent, and robust generative AI systems, focusing on safety, explainability, and risk mitigation.","intro-desc":"AI safety is a big concern for a lot of people, and for good reasons. AI systems are becoming increasingly powerful, and if they’re not designed safely, they could pose a serious threat to humans and society.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"Foundations / Best Practices","lastModified":1782338519,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Overview","lastModified":1782338512,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about SAP's generative AI strategy, our approach to developing guidelines, and the foundation guidelines you'll need to get started.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/whats-new/whats-new-1-126","title":"What’s New in Guideline Version 1.126","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.126","lastModified":1782338503,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.126.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.126.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/designing-sustainable-gen-ai-experiences","title":"Designing Sustainable Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Sustainable Generative AI Experiences","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page highlights the importance of ethical, responsible AI innovation and sustainability in product design, guided by SAP's AI Ethics Policy.","intro-desc":"Creating product experiences that all people love has always been our compass. As we integrate generative AI into the experiences we craft, we must stay focused on harnessing its potential for good. As these technologies grow ever more powerful, those of us who build with it have an important duty – to put ethics before profits or any other priorities. We all play a crucial role in advocating for responsible innovation. You should always refer to our SAP’s AI Ethics Policy Handbook to learn more about AI ethics and our risk framework.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_1bbff00a72ac042d0f979ea708b3631c82a9638cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/effective-ai-prompts","title":"Designing Effective AI Prompts","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Effective AI Prompts","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline covers best practices for designing effective generative AI prompts, including principles, patterns, and tips for optimizing user input and results.","intro-desc":"In the context of generative AI experiences, a prompt refers to the instruction given by a user to guide the output of a generative AI model.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_1a4bd171b358cf8337c61385170a58f2e03a5b349.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/ai-design-system-faq","title":"AI Design System FAQ","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design System FAQ","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the answers to the most common AI design questions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/designing-agentic-ai-ecosystems-and-experiences","title":"Designing Agentic AI Ecosystems and Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Agentic AI Ecosystems","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"mailto:ellie.kemery@sap.com","intro-desc":"As our world grows increasingly interconnected and our technology becomes increasingly intelligent, the design of agentic systems that are capable of autonomous execution and decision-making presents consequential challenges and opportunities. We all bear a significant responsibility to place humans and ethics at the forefront of our technology processes to prioritize the needs, values, experiences of users and the greater society. By doing this, we can create agentic systems and experiences that not only enhance user experiences, but also foster user empowerment and principles of responsible AI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_19d669eac03fa6629295a23435365a134057ae655.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/joule-assistant","title":"joule-assistant","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/foundation/ai-colors","title":"AI Colors","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Colors","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates the importance and association between UI elements and AI-powered features that enhance them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/foundation/media_1e42af22d41f3d2cb674e6e1ce86e9293e22bc193.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/matching","title":"Matching","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/contact-sap-ai-design-team","title":"AI Design – Get in Touch with Us","version":"","breadcrumbs":"","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/important-links-on-ai","title":"Important Links on SAP AI","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI Design is moving fast. To make sure you catch the latest internal content, we’re moving content that may outdate between guideline releases to our ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/featured","title":"featured","version":"","breadcrumbs":"","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/helpful-links-on-sap-ai-external","title":"Helpful Links on SAP AI","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/generative-ai-design","title":"Designing for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing for Generative AI","lastModified":1782338511,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP's generative AI strategy, including guidelines, best practices, and how to contribute to the design of business applications.","intro-desc":"Generative AI is the talk of the town. But what does it mean for the design of business applications? With this article, we want to give you an overview of where SAP’s generative AI strategy stands today, our approach to developing guidelines, patterns, and best practices and how everyone can contribute.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/foundation/ai-icon","title":"AI Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Icon","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI icon can be used alone, in buttons, or alongside labels or text to indicate content powered or generated by AI. The embedded AI ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/foundation/media_1e33cac0ef525d2a57692090d6fc280718eecf9cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/recommendations","title":"Recommendations","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines","title":"AI and Joule Design – Guidelines","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Guidelines","lastModified":1782338516,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Follow five guiding principles whenever you design generative AI features.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/whats-new/whats-new-1-130","title":"What’s New in Guideline Version 1.130","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.130","lastModified":1782338503,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.130.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.130.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/whats-new","title":"What’s New","version":"","breadcrumbs":"Discover / What’s New","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System guidelines are moving from experience.sap.com/fiori-design to its new domain at sap.com/design-system – don’t forget to bookmark your most used pages!","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/media_1e5358459744986ae3536869f07450e6780f99b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/featured/meet-ai-writing-assistant","title":"Meet AI Writing Assistant","version":"","breadcrumbs":"","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All relevant content is now incorporated in the page for the AI writing assistant pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/featured/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/designing-intelligent-systems","title":"Designing Intelligent Systems","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As the AI design system evolves, this page no longer reflects the latest developments.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/joule-assistant/joule-experience-primer","title":"Joule Experience Primer","version":"","breadcrumbs":"","lastModified":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This early Joule overview is no longer up to date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/joule-assistant/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/building-trust-with-generative-ai","title":"Building Trust with Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Building Trust with Generative AI","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page discusses building trust in generative AI by ensuring transparency, user control, explainability, and fairness in SAP products.","intro-desc":"With all of the exciting advances being made in generative AI, there are also real ethical questions and concerns arising around things like accuracy, reliability, and the role that bias plays in what is being produced. As we start to imagine all the potential value that technologies like generative AI can bring to improving user experiences, customer outcomes, and more, it’s essential that we design and build trust into each and every interaction people have with our products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/guidelines/media_110543980ca2999021760d547cd445162766a825e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to organize and place actions in SAP Fiori, ensuring they are easily accessible and clearly differentiated from navigation.","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/ai-design-quality-checklist","title":"AI Design Quality Checklist","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / AI Design Quality Checklist","lastModified":1782338511,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides an AI Design Quality Checklist with guiding questions and checkpoints to help design teams assess and improve SAP AI experiences.","intro-desc":"It is important to establish standards for the quality of SAP AI experiences. To get started, we are providing a first set of guiding questions and mandatory checkpoints to enable design teams to assess AI Design quality confidently and identify important follow-ups with technical experts. This AI Design Quality Checklist is also tied to the Design Intent Reviews and Design Excellence Reviews hosted by Chief Design Officer Arin Bhowmick.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"Business Roles and Tasks","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Business Roles and Tasks","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides best practices for mapping business roles to SAP Fiori, including goal setting, task breakdown, and designing for different task types.","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777125101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777125101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1782338517,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps can leverage native mobile features like camera, GPS, and accelerometer for ensuring consistency.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/delete-objects","title":"Object Handling – Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Objects can be deleted from a list or object page, with a confirmation dialog to prevent accidental deletion, unless specified otherwise.","intro-desc":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the items depends on the structure of the object (simple or complex).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_1420ac552e13b7b375167d6c0dc74f30370306117.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777125102,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Object Handling – Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about using the create with reference pattern for creating a new object and referencing it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_18613303bfe2a1150661fb1e7e7277403519fcba6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/designing-for-empty-states","title":"Empty States","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Empty States","lastModified":1777125101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers empty states in apps, explaining their purpose, design recommendations, and how to enhance user experience with clear guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_19f4505aa19fac28906348de6d2119371f56c59e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/copy","title":"Object Handling – Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Copy","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_19c2b382122892c2af0945dd02aeb09a4cc5f41a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling – Overview","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori message types and how to use them effectively in messaging scenarios.","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/messaging/media_139884682f4371430549515bb250c4886df56dc47.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses a hub-and-spoke navigation model, with a central home page and easy back navigation to provide seamless user flow across apps.","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/navigation/media_1e93ccccc2b283d2a243d359a6999c48eb4e66169.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/messaging/processing-multiple-items","title":"Message Handling – Processing Multiple Items","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Processing Multiple Items","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline covers how to communicate the status of multiple item processing, including success, failure, and partial processing, with clear messages for users.","intro-desc":"When a user selects multiple items from a table, it might not be possible to process all of the items at once.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/messaging/media_1f814c060f04e00e414ce785987d3ef3a347b4c32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is a temporary version of a business entity that saves unsaved changes, prevents data loss, and allows editing resumption until saved as the active version.","intro-desc":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_14824efef9dca768e282b67d962819d953809c925.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/ai-notice-base-concept","title":"AI Notice Base Concept","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / AI Notice Base Concept","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Outlines UX and UI design methods that ensure that users are aware when interacting with AI-generated or AI-edited information.","intro-desc":"This guideline outlines UX and UI design methods that ensure users are clearly aware when interacting with AI-generated or AI-edited information. In accordance with the SAP Global AI Ethics Policy, transparency is crucial for building trust in AI-enhanced products, and the AI notice concept plays a key role in achieving this transparency.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_15c7e662d18e9923836bbf46fbb66ae41f68298cd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782338678,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1777125127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782338678,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers SAP Fiori's data formatting rules for dates, time, numbers, and units to ensure consistency across different locales and seamless workflows.","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam integrates with SAP Fiori to enhance collaboration through tiles, menu options, and group feeds, connecting teams with key information in the cloud.","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Object Handling – Partial Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Partial Edit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Object handling interaction flow is used to edit specific sections or items of an object.","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_151176540ca66a2118dae22b47e68ef45b94f4f55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"","lastModified":1777125123,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Forwarding items is now handled by a Forward action in the Share menu of the header toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage busy states in SAP Fiori apps using local and global indicators to inform users during ongoing processes.","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/media_16f99fa6efcbe276c93111f8e44bafa685a0292cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1782338583,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Complex Objects – Global Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Global Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the global flow for creating and editing items, where only the main page needs to be saved, unlike the local flow.","intro-desc":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_107badff44f210450a3174b27162b1185cbeb4ef7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Simple Objects (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Simple Objects (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about flows to create and edit simple objects, with all information on one page and standard message and draft handling.","intro-desc":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_1a1cc118fe7262666a86d6ce90117d257b1581cc7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Object Handling (Create, Edit, Delete)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers actions for objects, including creating, editing, and deleting, with options to create from scratch, copy, or reference existing objects.","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Complex Objects – Local Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Local Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the local flow for creating and editing items with standard and draft handling, where each subpage is saved separately.","intro-desc":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_1c8c74db63ff7c7cbca5347151b48e2aadd70407e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Object Handling – Mass Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Mass Edit","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing lets users simultaneously update multiple objects with shared editable properties.","intro-desc":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/object-handling/media_186fa93495d3f4146973df58742e7efe8995daee0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization allows users to modify column visibility, order, sorting, grouping, and filtering for both simple and complex tables.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/tables/media_148972a96b93f46542626688003fc01290f86c781.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1777125144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services","title":"integration-and-services","version":"","breadcrumbs":"","lastModified":1777125146,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1782338519,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains international time formatting rules and how to use SAPUI5 time formatters based on user locale settings.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/media_108541462ce9e30919b7314c39a25f4645d7be76f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1777125143,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to manage and trim leading white spaces when copying and pasting text into input controls to prevent processing issues.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/media_1c3891164147b26d35d90c36cd06324f775f90cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines rules for displaying units of measurement using long text instead of abbreviations, based on locale settings.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/media_1fe324e275df364181851d438a6e8b79bb00683a0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1782338522,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers international date formatting rules and how to use SAPUI5 formatters based on user locale settings.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1782338522,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about international number formatting rules and when to use SAPUI5 number formatters based on user locale settings.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1777125146,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips provide additional information, appearing near the pointer for unlabeled elements, varying by browser and platform.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/media_1dd38bfc64a884844c90532d7384523cda110c084.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1777125146,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder in SAP Fiori launchpad lets users browse and launch SAP Fiori, SAP GUI, and Web Dynpro ABAP apps from one place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_13ba1291ffd940838846eceac47655f24ccc9df23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data.","intro-desc":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/media_1319c700fcb1f6fa576a4cce3d7477035e3ec7544.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Which Selection Control Should I Use?","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Which Selection Control Should I Use?","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Selection controls are UI elements that enable users to choose one or more options, with various types designed for specific use cases.","intro-desc":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support dedicated use cases. This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/media_1fbf5806ea6a90aa61abe81230bd18da77eedbf54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1777125145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the right UI element states helps users identify options and actions, including control, value, visual, and additional states.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/media_1380d05378bd5264023e6fc84e6076138ccf9a380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"Efficiently display and interact with data using responsive and desktop-centric table controls for various complexities.","intro-desc":"A table contains a set of line items, each displayed as a row that’s divided into columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/ui-elements/tables/media_107217f2f7767be3a21c2af8878d32a1590596cbf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777125164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1777125164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad hosts apps, offering navigation, personalization, and role-based access on mobile and desktop devices.","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction","title":"interaction","version":"","breadcrumbs":"","lastModified":1777125164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"SAP Fiori Launchpad – Merged Header","version":"","breadcrumbs":"","lastModified":1782338684,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"","lastModified":1782338677,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772 and Sunset of the SAP Fiori Client.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-my-home","title":"SAP Fiori Launchpad “My Home”","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad “My Home”","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The \"My Home\" space in SAP Fiori launchpad provides a personalized entry point with role-based app tiles, allowing users to add, remove, and group apps on both mobile and desktop devices.","intro-desc":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_153f77eff06072cef783df71456d92d13520fa096.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1777125161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Launchpad home page is the customizable entry point for accessing apps, with tiles and links for easy navigation on mobile and desktop.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_1f2981ddaf70261c89e9be9e125786fbbea0eac2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/cursors","title":"Cursors","version":"","breadcrumbs":"Foundations / Interaction / Cursors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cursors are graphical elements that show the current position within the software interface.","intro-desc":"Cursors are visual indicators that show where user interaction is currently focused on the screen. Users can move the cursor and interact with elements on the screen using a mouse, touchpad, or keyboard.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_19f56a748c4e9dfc1a149bce79f684326c2cdd247.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori Launchpad services include features like Recent Activities, App Finder, Settings, and more for enhanced user experience.","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_130348e70d783a65fed4991372085a7fd06ba1142.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-spaces","title":"SAP Fiori Launchpad Spaces","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Spaces","lastModified":1777125163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad spaces allow users to switch between spaces and the home page, organizing role-specific apps with tiles for quick access to relevant business tasks and content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_16f72ac0248bab2c56af202e3d0551b6e21b6d631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1777125161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Launchpad provides an enterprise search to quickly find apps and business objects like materials, customers, and maintenance plans.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/integration-and-services/sap-fiori-launchpad/media_1c99516cb73d573ee3cd8b163bcfac119b8bf85a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/states/interaction-foundations-component-states","title":"Component States","version":"","breadcrumbs":"Foundations / Interaction / States / Component States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The component state controls its interactivity and visibility, with only one state active at a time.","intro-desc":"The component state determines the interactivity and the visibility of the component. A component can have only one component state at any given time. The following component states are available: enabled, disabled, read-only, and hidden.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/states/media_151c2b93f016ec87072ac607b17230f6f99ea9285.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/states","title":"states","version":"","breadcrumbs":"","lastModified":1777125180,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/move","title":"Drag and Drop – Move","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Move","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Drag and drop is an intuitive interaction for moving an element from one position to another.","intro-desc":"Drag and drop is an intuitive interaction for moving an element from one position to another. In some cases, the draggable element is used as a content container and its position then has no business significance. In other cases, the draggable element represents a business object or value, and moving it changes that value.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/media_1643c188053da9dca8b5fbd5814b1eeb11a8df851.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop-overview","title":"Drag and Drop – Overview","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Drag and Drop is an intuitive interaction, which allows users to reorder, resize, move or transfer elements by dragging them from one location and dropping them to another.","intro-desc":"Drag and drop is a simple and intuitive interaction that lets users to reorder, resize, and move elements or transfer data while getting real time visual feedback. It is used in many contexts, each with specific needs and requirements depending on the use case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_1d2914f3017fd3cb4c9c60e3f5074543c1c31e081.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop","title":"drag-and-drop","version":"","breadcrumbs":"","lastModified":1777125178,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/overview","title":"Interaction Design Foundations - Overview","version":"","breadcrumbs":"Foundations / Interaction / Interaction Design Foundations - Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interaction design foundations summarize all aspects of how the user interface should behave when interacting with it to accomplish a certain task and a corresponding goal.","intro-desc":"The interaction design foundations define how the user interface should behave when users interact with it to complete specific tasks and achieve their goals. Interaction occurs through input devices such as a mouse, keyboard, gestures, or voice commands, and output devices like screens or screen readers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_1da1f012a47734798bbe6df63618b4509f66b5d83.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/screen-reader","title":"Screen Reader","version":"","breadcrumbs":"Foundations / Interaction / Screen Reader","lastModified":1782338577,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Overview of what is necessary to make a UI component accessible to screen readers.","intro-desc":"Every application and UI component should be designed to allow blind and visually impaired users to utilize screen reader announcements for all relevant content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/data-transfer","title":"Drag and Drop – Data Transfer","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Data Transfer","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"<Short Description>","intro-desc":"The drag and drop interaction can occur between components within an application or across different applications. This means users can transfer data from a source component to a target component, which may involve transforming the data format or data uploading if the transfer is across applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/media_1f1bc0128b250dd4f12379fa465795df5661c14fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/motion-design-overview","title":"Motion Design – Overview","version":"","breadcrumbs":"Foundations / Interaction / Motion Design","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design uses animation to enhance user interactions and experiences. It makes SAP software interfaces intuitive, user-friendly, and modern.","intro-desc":"Motion design uses animated visual elements to support interactions, communicate intent, and create a more engaging user experience. You can use it in SAP software to make interfaces feel intuitive, user-friendly, and modern.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_14d67ad623fe9273e629e26ac71361f0daeb4816e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/interaction-design-foundations-states","title":"States - Overview","version":"","breadcrumbs":"Foundations / Interaction / States - Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_12ec8ae5bfcdb32f5fee0a519fcadd19ed78276ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/reorder","title":"Drag and Drop – Reorder","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Reorder","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Reordering enables users to dynamically adjust the order of items by dragging an item and dropping it into a new position.","intro-desc":"Elements can be reordered by dragging them to a new position within a defined list or grid. Reordering changes the placement of elements relative to other items and requires a specific drop target to finalize the new order of the item set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/media_1dc19d32261b4e99023a1dc36cfc32afd87b41db2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/resize","title":"Drag and Drop – Resize","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Resize","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Resizing allows users to dynamically adjust the size of an element by dragging its edge and dropping it at the desired size.","intro-desc":"Elements, components, or containers can be resized in one or two dimensions – or both – depending on the interaction design. Unlike reordering, which requires a specific drop target, resizing is based on the final pointer position to determine the new size.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/drag-and-drop/media_16d6ef915cadb703869fbedd178d9d6833c7b141e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/gestures","title":"Gestures","version":"","breadcrumbs":"Foundations / Interaction / Gestures","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Touch gestures are key for interacting with mobile and touch-enabled web environments, allowing navigation and manipulation via natural hand movements.","intro-desc":"Gestures are touch-based interactions that let users navigate, manipulate, and engage with digital interfaces using natural hand movements. They're essential in mobile and touch-enabled environments, where you don't have traditional input methods like a mouse or keyboard. Each gesture – like swipe, tap, double tap, long press, or rotate – conveys a specific intent and triggers context-aware responses from the interface.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_19edbf13926038e2b420deeefaf57eb8e8086a267.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/states/interaction-foundations-selection-states","title":"Selection States","version":"","breadcrumbs":"Foundations / Interaction / States / Selection States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The selection state highlights the selected element, making it clearly distinguishable from others.","intro-desc":"The selection state is applied after the user has selected the element. The selected element should be clearly distinguishable from the other elements. The following selection states variants are available: selected, unselected, and indeterminate.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/states/media_1606cb341590fa042ec735a5ede2b8918f86ecf3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual","title":"visual","version":"","breadcrumbs":"","lastModified":1777125197,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1777125197,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/states/interaction-foundations-state-combinations","title":"State Combinations","version":"","breadcrumbs":"Foundations / Interaction / States / State Combinations","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Some of the states like selection state, value state, and interaction state can be used together.","intro-desc":"Some of the states can be used together with other states.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/states/media_15cb5e98246a386793f8b76da8bac986a3a3f31c3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/states/interaction-foundations-focus-states","title":"Focus States","version":"","breadcrumbs":"Foundations / Interaction / States / Focus States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Focus states determine which component receives input when no positioning is provided, primarily aiding keyboard users.","intro-desc":"Focus states determine which component receives the user’s input when the input doesn’t supply positioning information. The focus state is most important for keyboard users. The following focus states are available: focused and unfocused.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/states/media_1d3d4e285d3d03675d5ff5bfc0f5317b07c3f9bd8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/interaction-foundations-value-states","title":"Value States","version":"","breadcrumbs":"Foundations / Interaction / States / Value States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value ...","intro-desc":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_10e851a8c8f40f08eebacbf1c12e300572e4cecee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/states/interaction-foundations-value-states","title":"Value States","version":"","breadcrumbs":"Foundations / Interaction / States / Value States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value ...","intro-desc":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/states/media_16d2d5a627af8f1914830df888979ec0f220c5057.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/wrapping-and-truncation","title":"Wrapping and Truncation","version":"","breadcrumbs":"Foundations / Interaction / Wrapping and Truncation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn best practices for text wrapping and truncation, ensuring consistent behavior across devices and controls.","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls use wrapping to show full text or truncation to save space, depending on how important the information is and how much room is available.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/media_1b675c276d37e41908525b4ca9a525e582e413f6b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/interaction/states/interaction-foundations-interaction-states","title":"Interaction States","version":"","breadcrumbs":"Foundations / Interaction / States / Interaction States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Interaction states are managed by the component, with only one state active at a time.","intro-desc":"Interaction states are handled by the corresponding component directly. A component can have only one interaction state at any given time. The following interaction states are available: regular, hover, and down.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/interaction/states/media_19ec9031e8b6107af8f81b01305610f9e33712950.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/colors/morning-horizon","title":"Morning Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Morning Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. ...","intro-desc":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/colors/media_1a3f13591278075c4a8d5b2dcddd2db222eb28b65.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/colors/evening-horizon","title":"Evening Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Evening Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/colors/media_1b96154f01f35e4caeba1e1066a19f50f52baa5ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is an additional visual theme for SAP Fiori, offering a color palette that enhances user direction and association.","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/colors/quartz-dark-colors","title":"Quartz Dark Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Dark Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Dark is a dark theme for SAP Fiori applications, designed for low-light environments, ensuring a clean and consistent user interface.","intro-desc":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/colors/media_14502ab4f6d1a3687f67f65a2395e4672020106de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/typography","title":"typography","version":"","breadcrumbs":"","lastModified":1777125229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"","lastModified":1777125229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been revised and moved to the Interaction Foundations section of the guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1777125230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1782338541,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording","title":"Writing and Wording","version":"","breadcrumbs":"Foundations / Writing and Wording","lastModified":1782338541,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/walkme-boilerplate","title":"WalkMe Boilerplate Text and Examples","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Boilerplate Text and Examples","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section includes step balloons for tasks/UI elements that are consistent across many SAP products.","intro-desc":"This section includes step balloons for tasks/UI elements that are consistent across many SAP products. We’ve collected examples here that you can use/copy “as-is” or tweak slightly for your specific circumstances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/media_1998ec4e75b159c15d42d46d0ed565bbb083c7fc7.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines guidelines for overview page texts, including titles, subtitles, and actions.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1782338590,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator helps identify translation space needs and potential truncation issues in SAP Fiori apps, based on extensive translation data.","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1782338543,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme","title":"WalkMe","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe","lastModified":1782338541,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out our evolving content design resources for WalkMe content creators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations - Overview","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations - Overview","lastModified":1782338544,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section offers consistent use of design elements like colors, typography, and icons ensures strong branding, following guidelines on design tokens, and theming.","intro-desc":"The look and feel of a product are part of its branding. Their consistent use ensures the recognition effect we are all striving for. It is therefore important to adhere to the guidelines laid out in the following section and articles:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/typography/typography","title":"Typography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s proprietary 72 typeface is designed for legibility, robust hierarchy, brand voice, language support, and accessibility in SAP Fiori applications.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for text wrapping and truncation, ensuring consistent behavior across devices and controls.","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/ux-illustrations","title":"UX Illustrations","version":"","breadcrumbs":"Foundations / Visual / UX Illustrations","lastModified":1779893363,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"UX illustrations enhance understanding, make complex ideas relatable, and add personality to create an emotional connection with users.","intro-desc":"UX illustrations simplify complex information, enhance comprehension, and boost engagement through visual storytelling in user interfaces. Thoughtful use of illustrations supports a human-centered experience, making interactions feel approachable, relatable, and meaningful.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_1cc1ee328b1daa942b7556ee6a8df7bd3433e8125.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/typography/typography-horizon","title":"Typography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Horizon","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s proprietary 72 typeface is designed for legibility, robust hierarchy, brand voice, language support, and accessibility in SAP Fiori applications.","intro-desc":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/iconography/service-icons","title":"Service Icons","version":"","breadcrumbs":"Foundations / Visual / Iconography / Service Icons","lastModified":1777125229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Service icons ensure consistent, inclusive metaphors for SAP Fiori applications, aligning with native app icon design for third-party marketplaces.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/iconography/media_1e03f65455d1928106fd98f9c9c00e827845a82e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/ai-ui-text","title":"AI UI Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / AI UI Text","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI UI text serves as the primary means of communication between users and AI systems. It plays a crucial role in conveying information, instructions, errors, ...","intro-desc":"AI UI text serves as the primary means of communication between users and AI systems. It plays a crucial role in conveying information, instructions, errors, and feedback – ensuring that users can understand and effectively interact with the AI functionality.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/media_169c77503af531ab3b4d9b89d48f4a691cf47572a.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/situation-handling-framework-ui-text-guidelines","title":"Situation Handling Framework – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Situation Handling Framework – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline offers formulation patterns and best practices for creating text in Situation Handling, applicable to both standard and extended frameworks.","intro-desc":"This guideline applies to the texts that you can define for Situation Handling. The guidelines apply to the standard framework and the extended framework. The goal of this guideline is to provide you with formulation patterns and best practices to support you when creating text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/media_1ceba85e2a0519b5016378ad08e04e98de45fc1fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/theming","title":"Theming","version":"","breadcrumbs":"Foundations / Visual / Theming","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The latest SAP theme, Morning Horizon, is complemented by alternative themes like Evening Horizon, Quartz Light, Quartz Dark, and high-contrast accessibility options.","intro-desc":"The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also Quartz Light, Quartz Dark and the accessibility themes High-Contrast Black (HCB) and High-Contrast White (HCW).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_1a45413ea46ccff86dd6b5add932ebb90eca1d89a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/ui-text-guidelines-for-sap-fiori","title":"UI Text Guidelines for SAP Fiori Apps","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Guidelines for SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","intro-desc":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/ux-writing/media_18fcfcbc6be57e98137ab8258b2d3a9eb90b8a202.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1779893363,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates importance and association while providing direction to users.","intro-desc":"Color brings your screens to life. It communicates importance and association, letting users quickly identify key elements. When you use the theme’s color palette, you help create a clean, lightweight design that stays consistent and coherent across all SAP Fiori applications. Thoughtful use of color enhances visual hierarchy, usability, and accessibility. Colors also reinforce consistency and help users recognize status or visual feedback.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_177f1d34328b976c544a3e6b636ebd3d93917a9d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/iconography/product-launch-icons","title":"Product Launch Icons","version":"","breadcrumbs":"Foundations / Visual / Iconography / Product Launch Icons","lastModified":1777125215,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Product launch icons are a set of cohesive app icons representing key products in SAP Business Suite.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/iconography/media_13e7cff643e24aca3abffb92885a6ff337640de1e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1782338545,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to create icons for web apps in a third-party marketplace.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori adjusts content density for optimal component sizes, supporting both touch and mouse or keyboard interactions on any device.","intro-desc":"SAP Fiori is responsive and works on all devices and form factors. You need to support all common interaction styles in the same way. This includes interaction with a mouse and keyboard as well as touch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_181991c8bd8f95f41457f4f175f559c5b8c3f9bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/iconography/iconography-horizon","title":"Iconography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Horizon","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons for the Horizon themes feature a bold, consistent design with easy-to-understand metaphors, optimized for scalable use in SAP applications.","intro-desc":"SAP icons have been redesigned for the Horizon visual themes with a fresh, friendly, yet bolder style that is consistent in terms of size, stroke, and balance. The SAP icon style forms part of the SAP brand visual identity. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/iconography/media_19cc71d889c93e3b6b83ccb42533f4ff3c2060950.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/design-tokens","title":"Design Tokens","version":"","breadcrumbs":"Foundations / Visual / Design Tokens","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and ...","intro-desc":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and are linked directly to the SAP base theming content implementation that is used for all products to adopt the SAP standard and accessibility themes across all SAP technologies and platforms. Using design tokens instead of hard-coded values can streamline the work of building, maintaining, and scaling products with a design system.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/media_19f44ec8c49dbcb36970036ed3b9aae7d422ed116.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is an alternative SAP Fiori theme that uses a clean, lightweight color palette for a consistent and coherent user interface design.","intro-desc":"Quartz Light is an alternative theme for SAP Fiori applications. Color communicates importance and association and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/visual/iconography/icons","title":"Iconography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons feature a friendly, elegant design with consistent size and balance, optimized for simple, scalable user interaction.","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/visual/iconography/media_11d9d449f052b4f87fbbb2871ec6f63b4a6e3e76c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/analytical-list-page","title":"Analytical List Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page Floorplan","lastModified":1782338585,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The Analytical List Page (ALP) provides seamless data analysis, visualization, and actionable insights in one view, enabling users to explore, identify patterns, and take action on transactional content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/walkme-intro","title":"About the WalkMe Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / WalkMe","lastModified":1782338577,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This Content Design Toolkit is intended for WalkMe content creators (Content Designers, Builders, UAs).","intro-desc":"This Content Design Toolkit is intended for WalkMe content creators (Content Designers, Builders, User Assistance Developers).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types","title":"page-types","version":"","breadcrumbs":"","lastModified":1777125247,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans","title":"floorplans","version":"","breadcrumbs":"","lastModified":1777125250,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782338585,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplan-overview","title":"Page Layouts and Floorplans","version":"","breadcrumbs":"Page Types / Page Layouts and Floorplans","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of how SAP Fiori layouts and floor plans are used to build application pages.","intro-desc":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/media_1c4d78afccc080f19471585c3c3a457cddaaef55e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/web-assistant","title":"SAP Companion","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / SAP Companion","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Companion offers context-sensitive help and guided tours in SAP Fiori apps, enhancing the user experience with in-app assistance.","intro-desc":"SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on top of the current application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/media_13bfab4ae6bcc6c39aefca7e82ba6f84cb5a034df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/initial-page-floorplan/media_1c24b9881a2fb6ef7a56e348a9954eadb038b73b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/walkme-toolkit-guidelines","title":"Toolkit Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Toolkit Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.","intro-desc":"This section provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/media_1ead77ffbe996bb533dd3a5fa0738aa22ca603e7f.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/walkme-content-guidelines","title":"Content Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Content Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section provides WalkMe content guidelines.","intro-desc":"This section provides WalkMe content guidelines. Most of these guidelines align with SAP Fiori UI text design patterns and most User Assistance (UA) Style Guides. However, a few rules differ to better align with the tone and learning experience we want to provide within WalkMe experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/writing-and-wording/walkme/media_120a9d38dcbb17911349ae052a58d7fac5f6bb438.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/analytical-list-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777125250,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/analytical-list-page/media_1bce9986520016e88c27baa7a42d785b45086b71a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1782338566,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"This article explains how list reports allow users to view, filter, and act on large sets of items, often serving as a gateway to item details.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1777125267,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1777125267,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1782338558,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"List cards display items or links in various formats, including list, bar chart, and link types, with options for icons and images.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page","title":"Overview Page (OVP) Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) Floorplan","lastModified":1782338566,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app that organizes task-specific cards, allowing users to efficiently view, filter, and act on information based on their role.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1782338558,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Custom cards offer flexible design and content options for overview pages, allowing for features beyond standard cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1782338678,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/media_19fb37ced7333a42274b1bc8915cbfed7a046975a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777125266,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page/media_10987990b7b041e44a914b702aa39e51da4b32342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the list report header and content ...","intro-desc":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_1549c39ca8f620954aec85464c960f4de7b633ee8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/object-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125266,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the object page header, content area, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/object-page/media_15f578a0c33aa6dda2b04ee87e20811a0a2c98a57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125284,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1782338584,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards display items in a table format using the responsive SAPUI5 control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Cards","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Cards","lastModified":1782338584,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards on the overview page organize key app content, offering a focused, non-editable view of relevant data from multiple sources in various formats.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1782338585,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The fixed card layout offers predefined card sizes in responsive, collapsible columns for a compact and focused overview page display.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125284,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782338586,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1782338584,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout allows users to personalize card position and size, adapting content to fit business needs and available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/when-to-use-which-floorplan","title":"When to Use Which Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / When to Use Which Floorplan","lastModified":1777125284,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article explains SAP Fiori floorplans, which are designed for different tasks like providing overviews, listing objects, managing objects, or focusing on a single object.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1038cab413a616913e9b43568a3e103b9fe31d937.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1782338584,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The overview page enables immediate action through integrated card types (stack card, object stream, and quick view card) that allow users to interact without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782338584,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"This article explains worklists, which help users manage and process items, offering variants like simple lists, tabbed lists, and KPI-tagged lists for different needs.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1782338584,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125284,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1782338678,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125283,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see Worklist in the SAP Fiori Elements section.","intro-desc":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/work-list/media_1da586d19728bbc318a095878202d146cb1bf1aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125283,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125282,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts","title":"page-layouts","version":"","breadcrumbs":"","lastModified":1777125299,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782338586,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782338587,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout enables seamless navigation across multiple floorplans on a single page with resizable columns and various layout options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782338589,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page in SAP Fiori offers a flexible layout with a collapsible header and optional footer toolbar, supporting various floor plans and use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1782338585,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/dynamic-page-web-component","title":"Dynamic Page Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782338587,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"A layout component, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125299,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125299,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/dynamic-page-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is a generic layout control designed to support various floorplans and use cases.","intro-desc":"The dynamic page is a generic layout control designed to support various floorplans and use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/dynamic-page-web-component/media_1286bdfe0ab57adc42b3e48331bc4f453c508343f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can freely resize the columns, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-column-layout/media_1be0116a17f6906d6b170b0f48ddd63da33da9aac.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125316,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1782338587,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/ai-ui-starter-kit","title":"AI UI Starter Kit","version":"","breadcrumbs":"","lastModified":1777125317,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This UI kit was replaced by the SAP AI Web UI Kit.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125316,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/letter-boxing/media_1b9793eb36bcd37dcb7e0f6f6875f012c4604a06c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries","title":"libraries","version":"","breadcrumbs":"","lastModified":1777125317,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources","title":"resources","version":"","breadcrumbs":"","lastModified":1777125316,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/semantic-page","title":"Semantic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Semantic Page Layout","lastModified":1782338587,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is a predefined layout for freestyle apps, enhancing the dynamic page with predefined header and footer elements, aligning with SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/page-web-component","title":"Page","version":"","breadcrumbs":"Page Types / Page Layouts / Page","lastModified":1782338587,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782338587,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"Letterboxing in SAP Fiori restricts the UI width to 1280px, ensuring consistent aspect ratios, with optional use for adapting to larger screens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125316,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782338588,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout lets users view and edit multiple objects on one page, with each object displayed in a separate tab.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/joule-web-ui-kit","title":"Joule Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / Joule Web UI Kit","lastModified":1777125317,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article details the SAP Joule Web UI Kit, which includes design foundations, core components, UX patterns, and content, accessible in Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1910616f73010fb485ee3edb920fbb48cd365c3fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/sap-web-ui-kit","title":"SAP Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP Web UI Kit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit in Figma provides commonly used components like buttons and inputs, which can be used standalone or as a connected library for product-specific extensions.","intro-desc":"The SAP Web UI Kit in Figma contains the components used most commonly across SAP products, such as buttons and inputs. It can be used standalone, although many product teams use it as a connected library that can be cascaded to their own product-specific extensions. This means that they do not have to duplicate the commonly used components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_15c271d8b305f3e6888cc247ed4743ccde3253e32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/sap-fiori-for-web-ui-kit","title":"SAP Fiori for Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP Fiori for Web UI Kit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and ...","intro-desc":"The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and development processes and encourages consistency.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_14caac037c8d76ae5beeec55581a5305675042024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"external_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/downloads","title":"Download Fonts","version":"","breadcrumbs":"Resources / Libraries / Download Fonts","lastModified":1782338589,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the links below to download the following SAP fonts:","intro-desc":"You can use the links below to download the following SAP fonts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/ui-kit-overview","title":"UI Kits - Overview","version":"","breadcrumbs":"Resources / UI Kits / UI Kits - Overview","lastModified":1782338589,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP UI kit ecosystem provides a modular foundation for creating consistent, scalable user experiences across SAP products. At its core, it enables product teams ...","intro-desc":"The SAP UI kit ecosystem provides a modular foundation for creating consistent, scalable user experiences across SAP products. At its core, it enables product teams to build and extend their own design kits while maintaining visual and functional coherence across applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1782338588,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control enables responsive layouts with customizable columns and rows for optimal display on both desktop and mobile devices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-column-layout-web-component","title":"Flexible Column Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782338587,"designowner":"Cloud ERP","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-column-layout-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a pattern for displaying multiple floorplans on a single page. The flexible column layout is not restricted to a specific ...","intro-desc":"The flexible column layout is a pattern for displaying multiple floorplans on a single page. The flexible column layout is not restricted to a specific floorplan, as long as it is responsive down to phone size.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-column-layout-web-component/media_17e10ffe3c01247fac68fb9814973c016c1c26c7a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/sap-ai-web-ui-kit","title":"SAP AI Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP AI Web UI Kit","lastModified":1782338589,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the SAP AI Web UI Kit for Figma to speed up the design and development of AI features for your product. It’s ...","intro-desc":"You can use the SAP AI Web UI Kit for Figma to speed up the design and development of AI features for your product. It’s been designed to help you create responsible, accessible, and human-centered AI experiences with ease.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1782338679,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1782338678,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system optimizes padding between elements in SAP Fiori interfaces using responsive padding and margin classes.","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/design-stencils-for-figma","title":"SAP S/4HANA Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP S/4HANA Web UI Kit","lastModified":1777125317,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP S/4HANA Web UI Kit for Figma helps designers quickly prototype SAP Fiori for Web applications using the Morning Horizon theme, with elements for conceptual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1300dea86199038d609d7b3b08d3af2714fe96d26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page. Beforehand, the user selects the objects from another page, usually ...","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.\nBeforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.\nAs a result, the user can work on several objects simultaneously and switch between them easily.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/page-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The page is a container component for a full application screen comprising a header, content area, and footer.","intro-desc":"The page is a container component for a full application screen comprising a header, content area, and footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/page-web-component/media_1428b3579991178bdf89b7030feff3a9afed9db4d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined ...","intro-desc":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/semantic-page/media_128a69021abefd20cd335eeb71738fafed96eaae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-grid/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also ...","intro-desc":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/page-layouts/flexible-grid/media_1aa1ad1f3fccb9dbb40debc7533de84f2611f4835.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/user-research/user-research-method-cards","title":"User Research Method Cards","version":"","breadcrumbs":"","lastModified":1777125330,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user research method cards are now part of a new user research resource page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/user-research/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/support","title":"support","version":"","breadcrumbs":"","lastModified":1777125331,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/design-stencils-for-axure-rp","title":"Design Stencils for Axure RP","version":"","breadcrumbs":"","lastModified":1777125330,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1777125331,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1381c1ca2dcf879ab68ec6ce17f5405b744528d39.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125331,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/action-list-item/media_1f192edd5b50c31f8c7a4a2fffe9904a0e1ffa061.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/design-stencils-for-adobe-xd-2","title":"Design Stencils for Adobe XD","version":"","breadcrumbs":"","lastModified":1777125330,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777125331,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/design-stencils-for-sketch","title":"Design Stencils for Sketch","version":"","breadcrumbs":"","lastModified":1777125330,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/user-research/conducting-user-research","title":"User Research","version":"","breadcrumbs":"Resources / User Research / Conducting User Research","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"User research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors.","intro-desc":"User research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/user-research/media_113f9978e8998f1769a9e1e741286ae03b0baed62.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125332,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/action-sheet/media_1793e6be77583f4132b567990b06c63f05677c631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125332,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI button is made up of the following elements to enable AI-powered functions:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/ai-button/media_13f678ec89b54c773a9f26003000d08ac4a6bf640.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-button","title":"AI Button","version":"","breadcrumbs":"UI Elements / AI Button","lastModified":1777125332,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Target Design","description":"AI buttons allow users to trigger AI-powered actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13f678ec89b54c773a9f26003000d08ac4a6bf640.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/user-research","title":"user-research","version":"","breadcrumbs":"","lastModified":1777125330,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/user-research/user-research-resources","title":"User Research Resources","version":"","breadcrumbs":"Resources / User Research / User Research Resources","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"At SAP, user research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors. It is a crucial phase ...","intro-desc":"At SAP, user research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors. It is a crucial phase in creating a product that is user-friendly and meets the needs of the end user.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/user-research/media_113f9978e8998f1769a9e1e741286ae03b0baed62.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"external_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/user-research-overview","title":"User Research","version":"","breadcrumbs":"Resources / User Research","lastModified":1782338524,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the user research resources available to support your design-led development journey.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-notice/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125332,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI Notice guideline has been replaced by the Local AI Notice guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/ai-notice/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/support/core-design-services/core-design-services","title":"Core Design Services – Overview","version":"","breadcrumbs":"Support / Core Design Services / Core Design Services – Overview","lastModified":1777125331,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article serves as a resource for SAP Fiori web design support, offering guidance on components, design foundations, and feature requests.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/support/core-design-services/media_11b19cd480dd12def8f9a27c053bae207078145b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-acknowledgment/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI acknowledgment brings essential information and announcements about a present AI service to the users’ attention in a standardized way. Its primary aim is to ...","intro-desc":"AI acknowledgment brings essential information and announcements about a present AI service to the users’ attention in a standardized way. Its primary aim is to educate users about various aspects of AI-enabled applications, including information about potential risks and opportunities and the service’s limitations. Doing so establishes a baseline for user expectations and lays the foundation for building trust.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/ai-acknowledgment/media_169c77503af531ab3b4d9b89d48f4a691cf47572a.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1777125331,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10bb2d35197a587e97589e42fcfbb53d803bf36b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-notice","title":"AI Notice","version":"","breadcrumbs":"UI Elements / AI Notice","lastModified":1782338685,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.136.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/support/core-design-services/support-process","title":"Support Process Overview","version":"","breadcrumbs":"Support / Core Design Services / Support Process Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the graph below for more details of the steps we follow.","intro-desc":"Our support process covers three main areas:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/support/core-design-services/media_1c41fa26804982ec5c75062c873e70066d89b44f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/user-research/how-to-present-your-sap-fiori-app","title":"Showcase SAP Fiori Apps in Device Frames","version":"","breadcrumbs":"Resources / User Research / Showcase SAP Fiori Apps in Device Frames","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article provides a guide on creating visually appealing images of your SAP Fiori app, including device frame stencils and best practices for composition and keyboard use.","intro-desc":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/user-research/media_1404359f37fcc643bcd23e295ca90721d58fd9542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-acknowledgment","title":"AI Acknowledgment","version":"","breadcrumbs":"UI Elements / AI Acknowledgment","lastModified":1777125332,"designowner":"AI Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Informs users about the opportunities, risks, and limitations of an AI service.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12b793ee0fefc85e6f86528ad285e51c24e2fa3c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-progress-indicator","title":"AI Progress Indicator","version":"","breadcrumbs":"UI Elements / AI Progress Indicator","lastModified":1777125332,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Provides information about the status of a user’s AI request.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_164dfba42f4417b2f2c81eb6fe1a741bf068eb43e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/support/core-design-services","title":"Core Design Services","version":"","breadcrumbs":"Support / Core Design Services","lastModified":1782338527,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with the processes for requesting new features, handling support tickets, and asking for design advice.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/support/media_118f2112aec2fee7578b80cf6b18e5d716c969941.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1777125331,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ef16012ea1f674d09e22c5cd9335ff2be9657bbd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/resources/libraries/ux-illustration-creation-kit","title":"UX Illustration Creation Kit","version":"","breadcrumbs":"Resources / UI Kits / UX Illustration Creation Kit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UX Illustration Creation Kit helps lines of business create custom illustrations using a library of predefined assets.","intro-desc":"The UX Illustration Creation Kit helps lines of business (LoBs) create custom illustrations. Instead of requesting illustrations, you can use the kit to build what you need.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/resources/libraries/media_10e5e58df7ff4b6d199b3e48ddcb18c0ad0d33342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/support/core-design-services/innersource","title":"InnerSource for Web","version":"","breadcrumbs":"Support / Core Design Services / InnerSource for Web","lastModified":1777125331,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The InnerSource process for the SAP Design System ensures that all design teams can jointly evolve the design of our product portfolio. Supporting close-to market ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/support/core-design-services/media_1e5ed4a5ff225f8ff5b05c3bf22b6fbd16e900690.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/support/core-design-services/supported-components","title":"Supported Components","version":"","breadcrumbs":"Support / Core Design Services / Supported Components","lastModified":1782338530,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components ...","intro-desc":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components that we expect to be used broadly across all SAP products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/support/core-design-services/media_118f2112aec2fee7578b80cf6b18e5d716c969941.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit ...","intro-desc":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1777125348,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_162f7862c14ccd0084ae83c7f07a6b61f66146d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1782338679,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"An analytical table, also known as an ALV or ULV, contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.In contrast to other tables, the analytical data binding used by the analytical table allows an aggregated number to be shown automatically in a cell. This means that a number in such a summarized cell is a total sum of several lines in the database.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_18b73cb1e28bec04145d94f0ddbe4e63c36cfea90.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-text-highlight/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125347,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Based on user research insights and technical debt, we have de-prioritized development of the AI text highlight pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/ai-text-highlight/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-prompt-input","title":"AI Prompt Input","version":"","breadcrumbs":"UI Elements / AI Prompt Input","lastModified":1777125347,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Target Design","description":"Enables users to submit custom AI prompts in natural language.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1f912b3f37982757c4967a3bd34743025fb66a64f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-writing-assistant","title":"AI Writing Assistant","version":"","breadcrumbs":"UI Elements / AI Writing Assistant","lastModified":1777125347,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Target Design","description":"Assists users in creating, iterating, and improving text entries.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_18d71c6cdf22b016bfc4da1a8450ff43af0a37d57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-text-highlight","title":"AI Text Highlight","version":"","breadcrumbs":"UI Elements / AI Text Highlight","lastModified":1782338679,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of ...","intro-desc":"AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of this pattern is to keep the user engaged and informed, manage their expectations, and show that the system is actively working.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/ai-progress-indicator/media_1027b816ced4a0f49b7a10e324d201c09f915865c.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-prompt-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI prompt input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed ...","intro-desc":"The AI prompt input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed in natural language: custom prompts written by a user. In addition to text, it may also support other input options, such as images, voice, or various file formats.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/ai-prompt-input/media_1b2fe0981b422fbedaf5b607573bc6a8128e9166d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/ai-writing-assistant/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125348,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article discusses the usage of the AI writing assistant.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/ai-writing-assistant/media_185e499165d0b6de11afb91588dd90495875fff71.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/analytical-table-alv/media_19f2517bb7bb602acd379d50d65c8b4f22d3c2b84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-group","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1777125366,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays a number of avatars, which act as a digital representation of a user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19a2aaa99a40e4b4faac2a3d47d76ea3b864f575f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-group-web-component","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1777125366,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays several avatars together, indicating that more than one person or business entity is associated with an item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1e6ffe0acd5bbea21be3f98610fed621c10629a39.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-group-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125366,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1777125364,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1a2776b92678b666305ec22ee6495187a29dcadfa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1777125365,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1dbae460739853c52030a278271e1f936690e7ab1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-group-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar group displays several avatars together, indicating that more than one person or business entity is associated with an item.","intro-desc":"The avatar group displays several avatars together, indicating that more than one person or business entity is associated with an item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/avatar-group-web-component/media_143f1fac4a32f466c18c9365cc07418819ad2573c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-group/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, ...","intro-desc":"The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, project team members, or a group of employees, for example.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/avatar-group/media_1c4cb804a07a47b29c551b7f8b26012d83685c012.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125364,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/area-micro-chart/media_1a44ce4bcf73d12bad4a4de3494429e6b0416e2b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","intro-desc":"The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/avatar/media_1fd275b2ec52f082cc0d7e6a86c598ea8617a3e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1777125382,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12944dfb4ac9ae58d254554cb58aa68896a191986.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/barcode-scanning-mobile-integration","title":"Barcode Scanning","version":"","breadcrumbs":"UI Elements / Barcode Scanning","lastModified":1777125379,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12660ad81feb234819627cfb66e77bf30ea0159b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-web-component/style","title":"Accessing The component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125379,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1777125380,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1cc5fec57ea0c43b8e7a71543f50a1af71fcea905.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/bar-web-component","title":"Bar","version":"","breadcrumbs":"UI Elements / Bar","lastModified":1777125379,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The bar is a container that can hold text, titles, buttons, and input elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ca1db3ce6e0b18a473c5a08084e0ebb1ab5a51d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777125380,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_16ea7192a1f1bb7a1aefccde2c6154567c9904f38.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busy-indicator-web-component","title":"Busy Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777125381,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_144e0e60e547a1eea3cd7ab091c4c723eeff13e8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/breadcrumbs-web-component","title":"Breadcrumbs (Web Component)","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777125380,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb is a type of secondary navigation that indicates the position of a page in the application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19d997197376a272627ebd090a6e5714473b74b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1777125381,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1fd50a6d5a303aee20c1b6b1c94d322edfec08d5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777125381,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12140d56a67df213284efad6144f66e287a977868.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1777125382,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ba2cdfdae15188129f99960e884d84b8d3866067.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/busy-state/media_16e30becd2841a8bbdbde30b01be18525b9b85a84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-web-component","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1777125379,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a component for displaying images. Typically, it represents a person in a user profile, a product on a product page, or items/people in a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1662a6774966eaece27fafd1d825fecd5691ec71c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bar is a container that can hold text, titles, buttons, and input elements.","intro-desc":"The bar is a container that can hold text, titles, buttons, and input elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/bar-web-component/media_195eaa0ad059716b2bc08d095fc47b63d839dc473.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/busydialog/media_13aa5ff9f7de0c020ee6a30a41f3be54ff221703b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/breadcrumb/media_106c2c710fbf6f55fc4599675bd52c95e29cbc4aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/avatar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar is a component for displaying images. Typically, it represents a person in a user profile, a product on a product page, or items/people ...","intro-desc":"The avatar is a component for displaying images. Typically, it represents a person in a user profile, a product on a product page, or items/people in a list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/avatar-web-component/media_1a405cde681c29f6d0b3e017d9409974c82defdf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"The busy indicator informs the user about an ongoing operation.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/busy-indicator/media_1a63dbb512eb4de5785591c6c7d773261d5bc0e86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/busy-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125382,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the space where the busy indicator is to be placed is limited, avoid using a busy icon text. For example, don’t show a text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/busy-indicator-web-component/media_1300c93feb04a7f178ee1ccf3da8dd49f5f3c2b07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/breadcrumbs-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125380,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set the separator style. The the following options are available:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/breadcrumbs-web-component/media_16001aad44c6e104ec8aebbe717b516617098db88.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/barcode-scanning-mobile-integration/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/barcode-scanning-mobile-integration/media_14cef05a5b3eeb84d3a1b7626a9f22a422dd3e54c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1777125395,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1401999354baa258a65fe5be091da14f46a30dc6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1777125397,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1bc01250da9e28c89f5dfae9b757509f5f45c1aa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar","title":"Calendar","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1777125396,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_138e7ca859952d8dc02250914913aef95008c79ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/button-web-component","title":"Button (Web Component)","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777125395,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons allow users to trigger an action and come in a variety of shapes and colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c7555695ba57b75e6df4879e383c5ff94f41e493.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar-card","title":"Calendar Card","version":"","breadcrumbs":"UI Elements / Calendar Card","lastModified":1777125397,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1bbdcd191347ee54abec38aa31e1fba9534c28230.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777125395,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons enable users to trigger actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_16842c4c5b7fb018d89020b97595860dce12d0b4b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar-card/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected ...","intro-desc":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/calendar-card/media_1cf998dde09d9c7b19ba8439e201941eb05d3aae2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the Previous and Next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/calendar-date-interval/media_1e7d0554823734fa58c69f38f3dada666ed438f7d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/calculation-builder/media_18aec04f8fc16c780b640f8a9488996bc891d0b85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons let users trigger actions and come in various shapes and colors.","intro-desc":"Buttons let users trigger actions and come in various shapes and colors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/button-web-component/media_1d95dac4b50e81c8eb27e3ddd6a6963fce84e147f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual ...","intro-desc":"Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual styles to reflect purpose, priority, and intent. Button behavior and appearance can change depending on user interaction, layout context, or the type of task.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/button/media_15e9fdbfaf05ed46509bd13c7665f9c674afb053e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, ...","intro-desc":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/calendar/media_1c23e81058fb75bc8c8c934d35251d08b2efbfa7f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1782338677,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.Optionally, a paging indicator displays the user’s current position inside the set of items.The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. In a comparison scenario, it can also be useful to display several items side by side. The carousel is not limited to displaying images; it can contain any sap.m control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17f302169f29b6c6934b7fc891309ca7bbc3dd351.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1777125414,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_18a36a9719a86c303f1843323f35c6c8a443d9d85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/card-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or ...","intro-desc":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/card-web-component/media_174f7473dfd3d164352d5456678e4787ce65bda3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125412,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To change the month, the user can either use the previous/next arrows or select a specific month in the month view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/calendar-web-component/media_1e8e1bcd48e77ffd326c95b700bc25deb8fb37702.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/calendar-web-component","title":"Calendar (Web Component)","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1777125412,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar shows time-related data at a glance. It allows the user to select a single day, multiple days, or date ranges and to navigate through different months and years.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1d307d80994b71adf5d7744a87b4ddf37a5750fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/card-web-component","title":"Card (Web Component)","version":"","breadcrumbs":"UI Elements / Card","lastModified":1777125412,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_196e031867ea1d948a13790c68d61e7a6f5e6fb91.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/carousel-web-component","title":"Carousel (Web Component)","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1777125413,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel allows users to browse through a set of items by swiping right or left.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_189ec55cc33a38db79298ec390fc7cb0a773d5be5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a ...","intro-desc":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/cards/media_12cff613555f634035aef58b44089d164475cab72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1777125413,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1783b91b6a84a7d5d57c3e89031aea4a4afd0d846.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/cards","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1777125413,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b3785aabcb190e8947ea3c176a7a4e9bff73e548.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779176145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/carousel/media_1dc2820fc95aafa66306509643071ad960bfab90f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/carousel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125413,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"1. Container: Holds the content, navigation buttons, and page indicator.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/carousel-web-component/media_1b6ba5c09ce59400edbded9b46613cd89b8738c7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-toolbar/media_1d836296792fd447472804da0faa5f1369713c4da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type","title":"choosing-the-correct-chart-type","version":"","breadcrumbs":"","lastModified":1777125430,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Deviation","lastModified":1782338680,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category.All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Correlation","lastModified":1782338681,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.Scatter charts and bubble charts are the most frequently used charts to visualize a correlation, although using a line chart or bar chart side-by-side is also an acceptable solution.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Number and Time Format","lastModified":1782338681,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Comparison","lastModified":1782338680,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation through Time page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"[internal_only]","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-value-based-legend","title":"Chart – Value-Based Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value-Based Legend","lastModified":1782338681,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Semantic Patterns","lastModified":1782338681,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:                     Actual Values: What values are (solid pattern).                     Projected Values: What values might be (dashed line, hatched areas).                     Reference Values: What values should be (dotted line with empty circles, empty areas).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Time Axis","lastModified":1782338682,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe","title":"chart-vizframe","version":"","breadcrumbs":"","lastModified":1777125428,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type","lastModified":1782338682,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1782338567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Ranking","lastModified":1782338680,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Embedding","lastModified":1782338684,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/color-palettes","title":"Chart Color Palettes","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Color Palettes","lastModified":1782338684,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.This article explains what the three color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_146119eef57d509acecebda9fa5ff3d79c21a8168.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Variation Over Time","lastModified":1782338684,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.Time Category and Time AxisBy convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations. We recommend using the time axis which has three main advantages:                     It allows you to display dates and times in a responsive manner.                     All the complexity involved with formatting the axis labels is automatically taken care of.                     The physical spacing between the data points accurately respects the time scale, as opposed to just displaying them equidistantly.                     Additional CategoriesIn addition to the time category, there are additional categories that contain an intrinsic order and that that carry the notion of progression or trend.For example, age, time period, or a rating.As such, the rest of this article also applies to these categories.Column or Line Chart?                     Use a line chart if you want to emphasise the trend over time.                     Use a column chart if you want to emphasise the values themselves.                     In the figure below, you can see that the trend of the values immediately stands out in the line chart, while we need to make an effort to visualize the trend of the values in the column chart. At the same time, the values can be compared more easily in the column chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Part to Whole","lastModified":1782338684,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1782338684,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.","intro-desc":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/color-palettes/media_1656c66dd3f07b84c128115b113b0934701e82ac2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125465,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125465,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Reference Lines","lastModified":1782338681,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Legend","lastModified":1782338679,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/values-and-names","title":"Chart Color Palettes – Values and Names","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Color Palettes – Values and Names","lastModified":1782338682,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page provides all the color token names that are intended for use in all SAP chart palettes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"","lastModified":1782338679,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Popover","lastModified":1782338681,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A chart popover is used to display information or an action related to the selected data points of a chart.By default, the chart popover:                     Displays dimension members and measure values fed into the chart that relate to the data point.                     Displays the number of selected items when in multiselection mode. Does not display related actions.                     The entire content of the popover can be changed or a related action can be added at the end.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1782338681,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1782338682,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Selection","lastModified":1782338683,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Range Selector","lastModified":1782338680,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Size of the Chart Container","lastModified":1782338679,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Zoom","lastModified":1782338680,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1777125465,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox lets the user set a binary value (such as “true/false”).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_14c7903a0117bd2fee9d8c5b94949d41b9381d8b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.","intro-desc":"A chart popover is used to display information or an action related to the selected data points of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/pop-over/media_1f4435945d3dc5f915f2d8e10bf14e9b0546b54be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"","lastModified":1782338682,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked ...","intro-desc":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/checkbox/media_131edbc828e4def5cd627c72b6825c929576f5f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color token names that are intended for use in all SAP chart palettes.","intro-desc":"This page provides all the color token names that are intended for use in all SAP chart palettes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/chart-vizframe/values-and-names/media_1d59fa6cde6977dc554a7009bb6106a11a999c66a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1777125479,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1621603f391a48740d8bcdff89298faec6a0465a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1777125482,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_11f6a274117b6d9dc755eae1e8a3e1446901d9fe2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1777125479,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_170e97efbb24e3d91c000971666bd2438e3218404.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette-popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125480,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1777125481,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13c7fe1c6f602131dd3753778665612b1ca4f9f76.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1777125482,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13a32b33a122f287d7b9204d52bf397e892607e23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1777125480,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_179347d1e10a682fa8d77033bf3cc739d84d70cba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette-web-component","title":"Color Palette (Web Component)","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1777125480,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette allows users to select a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b963258a5dc30a06a8d187913f277268297518ce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/checkbox-web-component","title":"Checkbox (Web Component)","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1782338685,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, Select All), it can also display an indeterminate state to indicate that not all subitems have been checked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1989bcdd8ccfed4800b7f5e26baaf8e26bc5a2f72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette-popover-web-component","title":"Color Palette Popover (Web Component)","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1782338686,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette                     and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125481,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/color-picker/media_1b078aaf0dc5403af74c988e35c55cb41c0a2cc5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"The color picker allows users to choose any color and provides different input options for selecting colors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/color-picker-web-component/media_15ce7daea92f929a841e24660412a7cb0f9eb6319.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125480,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/color-palette-web-component/media_108e91c2d13bbfcc04158b01cceeeef88afdd7851.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125481,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/color-picker-popover/media_1a848c35dcc69fb71fb037a1ff2ab8d67c4815745.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125479,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color palette with 15 colors and just one recent color","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/color-palette/media_12ae77a64ad0711d80f1329dc66dfa8895f089415.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/cloud-file-browser/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The cloud file browser is a tool that allows users to browse through a remote repository, export data to the cloud, or import files from ...","intro-desc":"The cloud file browser is a tool that allows users to browse through a remote repository, export data to the cloud, or import files from the cloud to an SAP application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/cloud-file-browser/media_1b9c11ee4930035a8cbadb7cf376e0ce5e19b827a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette-popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125480,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover opens when the user clicks on a triggering text link or button.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/color-palette-popover-web-component/media_10191cf92cd4e123db7d7f4454b308c1f3f227276.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/cloud-file-browser","title":"Cloud File Browser","version":"","breadcrumbs":"UI Elements / Cloud File Browser","lastModified":1777125478,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"A tool for browsing through a remote repository, exporting data to the cloud, or importing files from the cloud to an SAP application.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_195c56544015c48b0afd7e7acb52ba10f34f03685.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/checkbox-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125478,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-picker-web-component","title":"Color Picker (Web Component)","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1777125481,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b8387565e9db5f3a918e1bf2b37d3690f0eed203.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125479,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/color-palette-popover/media_107f2bbe32647762877817cb0b250a23c3bd423e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/checkbox-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox ...","intro-desc":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, Select All), it can also display an indeterminate state to indicate that not all subitems have been checked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/checkbox-web-component/media_1b474e3668604087733ed6b33665b1e6db9007cce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/currency/media_1ece18af9c509f14a837e4d29611141968ce5e46a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1777125499,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15b5940e9ccdc4a95fc6dbc49d98d7374265caa52.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1777125498,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1738feb6fb9c61d61d0f42e475828bb17c05bd22d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1777125499,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1e15ffb5f8f347b531a05d221a553e4ffe876b386.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/combo-box-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125497,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1777125497,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1f45a654433704f22b1cc3c4445bc1e32bcae6f0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1777125496,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13a0d7279f03bd5e58608a4150ae7923e9f361b2f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/combo-box-web-component","title":"Combobox","version":"","breadcrumbs":"UI Elements / Combobox","lastModified":1782338679,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combobox allows users to select an item from a                     predefined list.It provides an editable input field for filtering the                     list, and a dropdown menu with a list of the available                     options.If the entries are not validated by the application, users can also enter a custom value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1863898b42aa89dd33616aa2ed9ac4b6c978a4a63.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125497,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combobox allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/combo-box-web-component/media_15f323bedbd4fb3b49e6069ba6d707385c047232e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/comparison-pattern/media_1c240b529e72e2fa053c6626e59d9cc68e9fe8645.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125499,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/date-picker/media_1da94e74ba4a2dbee666c10d58a3d53122cee0e52.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/combo-box/media_18b457f9616bd67c2dac48ec1574a056eab37a024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1777125513,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ec2771196c09049434ea07c5df14aba290e42d07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-range-picker-web-component","title":"Date Range Picker","version":"","breadcrumbs":"UI Elements / Date Range Picker","lastModified":1777125513,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range in the calendar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_198d228240311fee0e933af5d03f2b91ab7c8d6ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1777125514,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1eaa054636d0b1785d525a550560cba90881fe10b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1777125514,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control interrupts the current app process to prompt the user for information or for a response.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ee2c8e5005dff65020d1ca8a4d53896a65ac71ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-picker-web-component","title":"Date Picker (Web Component)","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1782338684,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users enter a single date and                     navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1d972e27a2513e784f86e65e92f013156107f674c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1777125514,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_182d470d9c04ad4c692fb3425fea174ec7121dadb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-range-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125513,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/date-range-picker-web-component/media_1f201b688c51f6104860ff9895b26d73cf2da5465.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"The date/time picker allows users to select date and time values in a combined input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/datetime-picker/media_149c67e757203a28f03639e2676d5ca3bfecf02c1.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-time-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select both the date (day, month, and year) and time (hours, minutes, and seconds).","intro-desc":"The date/time picker allows users to select both the date (day, month, and year) and time (hours, minutes, and seconds).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/date-time-picker-web-component/media_1c3e0a28fd3dc38b4e1eb7b5214b7922075042b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-time-picker-web-component","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1777125513,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select both the date (day, month, and year) and time (hours, minutes, and seconds).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_171f86b89e966abd3d73f38ce3ecda58bee0f33f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125513,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker supports Gregorian, Japanese, Buddhist, Islamic and Persian calendars. You can use a single calendar type only, or show two calendar types – ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/date-picker-web-component/media_108b3cbbbc65fe122271df7db12daa0ed09156e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125513,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.Dialog) pauses the current app flow to collect a response or decision from the user. It requires explicit input – such as ...","intro-desc":"The dialog control (sap.m.Dialog) pauses the current app flow to collect a response or decision from the user. It requires explicit input – such as confirmation, cancellation, or data entry – before proceeding.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/dialog/media_1bfac893cc7d441a4bcf48049811930c6153ca430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/date-range-selection/media_1f39b5eb63b916e76a48ae549205ad4d3f28938f6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1777125529,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_186ec1190b7154c9f5ddfccbd83b5845dccf4a15b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1777125530,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1156501eac156b9caa0cc89aad0a9b588748fd382.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-side-content-web-component","title":"Dynamic Side Content (Web Component)","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1777125530,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1fcec572c6ad877326874f19607a45580445939f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1777125529,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1a3fcf69b240cd88f53c23842a5864153296732d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dialog-web-component","title":"Dialog (Web Component)","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1777125529,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog component is a modal window that appears temporarily on top of the main screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1829e2306f4ef5a8f6c4cfd0877733e472dab4f05.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-date-range-2","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date Range","lastModified":1777125529,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_103a45bb17117ede0c45aeb1d8ba9a2a98637653c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/expandable-text","title":"Expandable Text","version":"","breadcrumbs":"UI Elements / Expandable Text","lastModified":1777125530,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The expandable text control provides access to truncated text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19da90aea5c0800469aca7446ff67a75c5b7a0546.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125529,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/display-list-item/media_133b9d5f6374df618a2c60b0e091d9fde05205715.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/expandable-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The expandable text component lets users view longer pieces of content without taking up too much space in the layout. It shows a short preview ...","intro-desc":"The expandable text component lets users view longer pieces of content without taking up too much space in the layout. It shows a short preview of the text by default, with a Show More link to reveal the full content and a Show Less link to collapse it again. Depending on the design, the text can expand inline or open in a popover.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/expandable-text/media_1ae4d6b6bfff4bbb09015027a27bf9f24a3e54743.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dialog-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the ...","intro-desc":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the user for a response. While the dialog is open, the main screen is dimmed and blocked. A user action or confirmation is required to return to the main window.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/dialog-web-component/media_12283c89f3952026666f7cb671e0e1c9694cccfa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/export-to-spreadsheet/media_1304a2eca1d0416daeab79b76cfeff61031a58336.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1782338687,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-date-range-2/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/dynamic-date-range-2/media_129e4349aa26ec0008952dcdf3d21650e74e780f5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-side-content-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. ...","intro-desc":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. The side content appears in a container next to or directly below the main content. The width or height of the main content area adapts accordingly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/dynamic-side-content-web-component/media_1fe415f4bc8c1e172587b5990270b79f26caed549.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/feedinput/media_11b7a529fcc4ef4db57e1f2259811def5acfc7da4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a flexible layout container that enables the displays of additional contextual information alongside the main content. It adapts responsively to different ...","intro-desc":"Dynamic side content is a flexible layout container that enables the displays of additional contextual information alongside the main content. It adapts responsively to different screen sizes, automatically repositioning the side content on smaller devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/dynamic-side-content/media_153fbf7ccb2cdab975c8e44b27dce97f17f1549c1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1777125547,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19b00a7268c49008465312bbdd7f022f276d1744e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1777125546,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1030f9c1cc6ff4455afdf07bda192c4ec134f5a32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/form-web-component","title":"Form","version":"","breadcrumbs":"UI Elements / Form","lastModified":1777125549,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_195664e6fa3161129883a37f3373984f6896a9fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1777125548,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation for fields in SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_11bbe74d231d95aecc7507ca0cfc4f85c21001e3d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1777125546,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b61edc791937c0ae99febdf9d511948b426886e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1777125546,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ea56d2e9bb720ba135015de98dbda62c1550383a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/footer-toolbar/media_12a3f22e888af82d7f02d0156be07146fe923ea87.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/flag-and-favorite/media_165a342b5a1cd4e8caa1f2056ffea6b211160c6f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/form-field-validation/media_1a60823b6e3a8d75aaaf96487420c63fce7955bf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and ...","intro-desc":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and the overview page, and is also available as an alternative layout to the visual filter bar in the analytical list page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/filter-bar/media_11c6902d5d90de4e39bff6479df53fb9e66de70ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/form-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125549,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/form-web-component/media_1c45a296e899647574badbae920e0efaee31bdd23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/form/media_1d63a4170d01a5c0934425974c4c1e1e0075d3323.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1777125566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b94ff8523a28259079e446fee8b17687562c175f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1777125565,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_114330825f5cacac149e43f26d9c8e3dfda4b9074.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1777125565,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1841027ebc68fc036150da6af1fa82b2788b3fc59.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1777125564,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1fae8da27aad67ed7955db99abd96bd9f35bb01ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1777125564,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The formatted text control displays HTML text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_175c8d1ac8959dcad08aed2fa30b24381ec485baf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/formatted-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125564,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"By default, the control uses the standard font and headlines. It supports the following HTML tags:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/formatted-text/media_1ad302b9081d3eac381c9202963c8e33714f082fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information, such as key performance indicators (KPIs) or status details, offering additional context without requiring users to leave the ...","intro-desc":"The generic tag control displays complementary information, such as key performance indicators (KPIs) or status details, offering additional context without requiring users to leave the current page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/generic-tag/media_1440a090182e73adf56f02fa48ed627a89993fa9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in ...","intro-desc":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/generic-mask-input/media_14388e3decc745639a06b5268156b5a1a162ed78e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/gantt-chart/media_182607306f0ec9c8750541a3ff9cd5c21c5bc4a94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the ...","intro-desc":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/grid-list/media_1b454ce5b965ffd3cacbcca0cf7f7a9a4e50a737d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1777125598,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_175d3e5c9322b26b1fcdde65b6ce73fb05132a9e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1777125598,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar always appears in the header of the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_14f56a0a4d67be0b2faa10138047632a1df3599a0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/illustrated-message-web-component","title":"Illustrated Message (Web Component)","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1777125599,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10c52bf91052b0bdf2cf1b308e60106cd1c9ce34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/icon-web-component","title":"Icon","version":"","breadcrumbs":"UI Elements / Icon","lastModified":1777125598,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An icon is a symbol that is used to depict an item, action, or status.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_101ade000781b80020958a803fe0d07356407187d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/html/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise ...","intro-desc":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/html/media_19b84bf34545fee97d63137d2ec1147dc6fa299fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/html","title":"HTML","version":"","breadcrumbs":"UI Elements / HTML","lastModified":1777125598,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_14c456ab3deee644191c408e18add0ad1fa3ac000.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1777125600,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1a477f1876ea7e5a8c26784ea518c4425da486fcc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1777125599,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are a powerful way to capture the user’s attention and to communicate your message.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c1947e8a30a55713f2de6da6fe9cdd85b1b4c457.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/illustrated-message","title":"Illustrated Message","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1777125599,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10c52bf91052b0bdf2cf1b308e60106cd1c9ce34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/input-field","title":"Input Field","version":"","breadcrumbs":"UI Elements / Input Field","lastModified":1777125600,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1dbb9058a46440aa1fdf3332a2280754f738b8d10.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/infobar/media_1ba75fd9c7d23b91ad5f00a6e5de73ed8dbcf1b28.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into ...","intro-desc":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/image/media_16451af95fa2d40b83226fc5eb72c93be6114bf58.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/illustrated-message-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125599,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An illustrated message includes a set of five UX illustrations per use case: large (L), medium (M), small (S), extra small (XS), and base. Each ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/illustrated-message-web-component/media_17910771d548c327d6bad6ec15492a9867f14c623.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/icon-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector ...","intro-desc":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector graphic. Icons can be purely decorative or used within interactive elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/icon-web-component/media_15f2cdd9e19a7723a5f438468581130b546cd16c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/illustrated-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125599,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The illustrated message combines a solution-oriented message, an engaging illustration, and a conversational tone. It communicates specific use cases, like an empty state, more effectively ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/illustrated-message/media_1c278e871809df761fe9caaea7c5022cacf586c64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/header-toolbar/media_16211bc4d4ad8145a4c8bbb2e6676c81d00b3112a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar is a navigation and filtering control that contains a set of tabs, each of which can display an icon, text, or ...","intro-desc":"The icon tab bar is a navigation and filtering control that contains a set of tabs, each of which can display an icon, text, or both and link to a different content area or view.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/icontabbar/media_1994d178fa4940bc374053fa217c28d650dcb7db6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you ...","intro-desc":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/input-field/media_138845a6adbe486936d6bb820845fdc1709a01261.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/input-web-component","title":"Input","version":"","breadcrumbs":"UI Elements / Input","lastModified":1782338683,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"An input allows users to enter and edit text or numeric values in one line.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12dd57c5b18ca231ba9ccd88cd4222c66ccef0016.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1777125615,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1f366d0285bdc5d68c436d9f31e9702d96dd2a954.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1777125616,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15d0a2711e410acb655b7ab56d12cd27621b4ee05.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1777125617,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b817e010750d4bb627cfae49c13209dc2fa37185.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/input-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125614,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1777125616,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15482e6f32cb7f70d431fe6e413e60efa9e253b76.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/label-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125617,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Label: The default label comes without the optional “Required” indicator. The user can continue without providing input in the corresponding component or components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/label-web-component/media_1cfbcd62d868069e193cd0ed23c485b499ec665cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/invisible-message","title":"Invisible Message","version":"","breadcrumbs":"UI Elements / Invisible Message","lastModified":1777125616,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_14a3c5c0bc8753912d2074dbfde1ad4dcbf2cd201.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1777125615,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_16e9417153a166a3be8bfd2a01e54b77741d165c1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1777125615,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1352664a5084983747b5609d3cda788f940c73ea5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label","lastModified":1777125617,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name assigned to a component or a group of related components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13ed5f048894e958511019a767a02838878ba396d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125614,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/input-list-item/media_1eaaeaa0a5452a278606c9e19135caa52112785c7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1777125614,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1dd84db7bd2232638934317981c6d19e64a6bb1a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/invisible-text/media_1bb653aeb0da45903951b29fa321db56586b9f21c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/lightbox/media_1b90785d7cd883c0b78b64033924ec34fe0ac3166.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/invisible-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users ...","intro-desc":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/invisible-message/media_18eac0c5b4fddcdd03feeccd307d69481b64d77d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An input allows users to enter and edit text or numeric values in one line.","intro-desc":"An input allows users to enter and edit text or numeric values in one line.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/input-web-component/media_168cf5ac9972c12bce5ebd1d48086d727b78a3257.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1777125614,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_114c632d3b0d722e02ed493f1eed765e4fe76988a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A label is the name or title of a control or group of related controls.","intro-desc":"A label is the name or title of a control or group of related controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/label/media_12f37a1f0727c0a66a68e60accfa41338cb80493b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1777125583,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_105f34094ca4e49d64a41b767a5312b77a0a4454e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1777125584,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_183eca8645eed2c9346dbebb0e4fbe8d8809a6aec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/guided-prompts","title":"Guided Prompts","version":"","breadcrumbs":"UI Elements / Guided Prompts","lastModified":1777125584,"designowner":"AI Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Guide users in instructing the generative Al model.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1cb74121dc0a61e8f35bddd6e1c64c1edfbaaffa1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1782338686,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is optimized for handling large numbers of rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_14af2ba20c348efcf7a2da4640d1f43e76e286856.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/guided-prompts/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Guided prompts provide structured input Uls to guide the user in instructing the generative Al model on the desired output. They are helpful when users ...","intro-desc":"Guided prompts provide structured input Uls to guide the user in instructing the generative Al model on the desired output. They are helpful when users want to specify certain attributes, styles, or parameters for the generated content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/guided-prompts/media_1a4c7219e3202d4d15a6fa3293c11aa86afecc1ef.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125583,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is optimized for handling large numbers of rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/grid-table/media_1e209d643e6fa81eb0619cd4955bac893f66d1f68.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/local-ai-notice","title":"Local AI Notice","version":"","breadcrumbs":"UI Elements / Local AI Notice","lastModified":1777125634,"designowner":"AI Design System","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Ensures users are informed when content is AI-generated.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_152dfa0fa3a9bbb53d8793da0d7bdf966b73b5ad3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1777125634,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1bd45f01886edbff640b5961a41aad9e142fb5e64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1777125631,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_147798bba89b3fe1e37430c72b21055f5bcbcf9d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1777125632,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1fcd497fc61431596c51cf3e00e571b90c96ec9db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/link-web-component","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1777125632,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as a hyperlink) is an interactive text element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c7d91e4fbba50800684991d1ce8b27968f0c1157.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/link-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125632,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A link (also known as a hyperlink) is an interactive text element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/link-web-component/media_1d4e7ca627637d49aa1b4b212beccce0a2da66fe9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1777125630,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1251a3f18277cb1bb37937c6ddea9c9433196f917.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/list-web-component","title":"List (Web Component)","version":"","breadcrumbs":"UI Elements / List","lastModified":1777125633,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the list component to display different types of list item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_125cc6b829ac88a371e64cde7c087b0fb71963c5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782338685,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages or sections of an application.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10d93447f54d3b633fbf80c98e5f3922f4a1b0d2f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages ...","intro-desc":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages or sections of an application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/link/media_130efb9cd4950205248110f5cbc906eac84a6686c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/list-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML ...","intro-desc":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML content. List items can also be grouped.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/list-web-component/media_1a204d9a8fca716d3fbc7d183780d2e75872b4fcf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/local-ai-notice/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125634,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local AI notice pattern is mandatory to mark AI-generated content in high and very high impact decision scenarios where users interact with AI-generated or ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/local-ai-notice/media_152dfa0fa3a9bbb53d8793da0d7bdf966b73b5ad3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/menu-web-component","title":"Menu","version":"","breadcrumbs":"UI Elements / Menu","lastModified":1777125650,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A menu offers the user a list of alternative actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_103eced6af0f058e1487e66134701ce58cee3ddca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1777125651,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover control can display multiple messages of different types in one list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1849174013612670c0b8b16a03847af7dc2356b67.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1777125651,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a control that is used as an information bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1194ee86eafe51eb9b6649cececfcf0277b9631fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/menu-button-web-component","title":"Menu Button","version":"","breadcrumbs":"UI Elements / Menu Button","lastModified":1777125649,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13b91d73d155d88c40a26edd0891c4afef71d0383.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/menu-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"The menu button offers a set of options for an action, displayed in a menu.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/menu-button-web-component/media_1c966c9452be8146755b335b0c6687624f8d190b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/menu-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125650,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visualization of the menu item adapts automatically, depending on which elements are included.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/menu-web-component/media_1a7657263f98d294c5fb1048cd30d3189d2f598e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be ...","intro-desc":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page, or in the header of an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/message-strip/media_19a41d038c87c01e74f564286f4e7fa726bb09ebe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1777125650,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box is a special dialog for displaying different message types.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_182eb6d2097c8fdd6c8a9c97026b4e1ce2db9a87c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125651,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/message-popover/media_13fdba32a3548ad4a64980691267ecabacade7d6c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/message-box/media_1b39c8ebfd2c67de27b26b91bdc4da871f745def0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1777125666,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10c2d58e75892d7e9223fb88abc14732a9453d8ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1777125668,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1843b1bab04ade10920de61d2103a186a3f2e0a19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-strip-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125665,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message strip with or without an icon or Close button. If necessary, you can also configure a custom message strip.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/message-strip-web-component/media_1c85df62d4c76c1d3a5b726845d8023346a145cec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-strip-web-component","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1777125665,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip component allows you to embed application-related messages on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1bcfa9793c72daed258a68033f2bd729438929349.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1777125666,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can use the message view to display messages that are not related to form or table fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12a366b8ef7d44069b2048311d125007d6432e50e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-combo-box-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125668,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1777125667,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize the state of individual items in a linear workflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c530f345e6e900993a80d02969a54f9136c4eeec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1777125665,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15d758db1c89b4953237f2f55a966d2f78040443b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to ...","intro-desc":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/message-view/media_1297823960caa449a4bd588d12ddce9a83d802ff8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-combo-box-web-component","title":"Multi Combobox","version":"","breadcrumbs":"UI Elements / Multi Combobox","lastModified":1782338686,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi combobox component enables users to select                     options from a predefined list or enter a custom text.It provides an editable input field to filter the list and a dropdown arrow to open the list of available                     options. The select options in the list have checkboxes                     that permit multiple selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_11d7c9a37954b54fe035b6055d89edbc7f42925c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125668,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi combobox component enables users to select options from a predefined list or enter a custom text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/multi-combo-box-web-component/media_1ab2ebb975588b55c0ae570df14b02881ca7339e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125667,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The default steps can be replaced by other controls. The following controls are supported:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/micro-process-flow/media_16ad4ea12ff054ea17f03587aa63bf439f3633207.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/message-toast/media_12b1d48b56e49a6eba9e17d00186b1def5051124b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box lets users select one or more options from a predefined list. It includes an editable input for filtering and a dropdown with ...","intro-desc":"The multi-combo box lets users select one or more options from a predefined list. It includes an editable input for filtering and a dropdown with checkboxes for multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/multi-combobox/media_13b0df4bef0d13335da8031790ed77147d534f643.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1777125684,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_116727355369bb5e81890b17c73ee2adb7f6ff5b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-input-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125683,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1777125684,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12ad6602c273072dd5cdbb74dfeb21a9f50f77284.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1777125683,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b9fda93defa03fcc8c6a58f69ae8f741b6a385ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-input-web-component","title":"Multi Input","version":"","breadcrumbs":"UI Elements / Multi Input","lastModified":1782338687,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi input allows the user to enter multiple values, which are displayed as tokens.To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ea3fc44de0baf8200706c9349d6c6f839c5567ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications serve as real-time alerts, providing users with information about significant events, updates, or changes in business processes, workflows, or data. Notifications ensure users remain ...","intro-desc":"Notifications serve as real-time alerts, providing users with information about significant events, updates, or changes in business processes, workflows, or data. Notifications ensure users remain informed and can take timely action or make decisions without disrupting ongoing tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/notification-center/media_12b2ca0735ece3cf5ccf3e4c73403f7d576f63bc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows users to enter and manage multiple values displayed as tokens within a single input area.","intro-desc":"A multi-input field allows users to enter and manage multiple values displayed as tokens within a single input area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/multiinput/media_173f3d16993db12dabd14d2eec5a7b5aaf9d6e154.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/multi-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125683,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi input allows the user to enter multiple values, which are displayed as tokens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/multi-input-web-component/media_180f153e02a3558b2a41ba9dee20f5d0f574ea9f6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777125700,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1328f040cd295dab29537f328b03b7cc5ce6bd3bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/placeholder-loading","title":"Placeholder Loading","version":"","breadcrumbs":"UI Elements / Placeholder Loading","lastModified":1777125700,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13ff7a7333591b85daf8ee2da6a139aa03869bad3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1777125699,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1308ff2e008d827dc3f9613229ccd4eae3089d227.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/panel-web-component","title":"Panel (Web Component)","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777125700,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a responsive container for grouping and displaying information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_172b4b37fcba7f99a215c3dc44e8c7946f6ad05ee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782338686,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is                     connected to an object and displays a certain type of                     information (status, identifier, number, marker).                     Object status: a short text that represents the semantic status of an object                     Object identifier: a short text that represents the key identifier of an object                     Object number: a short text that represents the numeric                     (key) attribute of an object and its unit                     Object marker: indicates the technical status of an object","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_18ce6628526fd1b32f6e1210ae065d3a1041925f4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1777125699,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item offers a quick overview of an object within a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19130d01c71644aa45c352045c67add76abc36139.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/p13n-dialog-popup","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1777125699,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19cbd5d381c117e5ad1479bdf7626722b56e7e298.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1777125700,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF viewer control displays PDF documents within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_18508a09693bcfba47b087c386f6a44fad7f1e6f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/panel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you ...","intro-desc":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you can make the content area collapsible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/panel-web-component/media_11356a4925593d71f3b9b6bd6cfbba9467589b6ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125699,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item’s text sizes are limited due to truncation. The title wraps once and truncates after two lines. The key attribute also truncates ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/object-list-item/media_1f45470c7866e6bf8083da18bf1c214a3a08ea800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/placeholder-loading/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. ...","intro-desc":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/placeholder-loading/media_13175ff2e20060d41ef72d9cee92b3f257f4ad589.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","intro-desc":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/panel/media_1bdc7737232c3a7163f742ccee16854d7232335d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125698,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/object-display-elements/media_1d5e293aa90a85990cd3e79fbc23bdae9e037287e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/pdf-viewer/media_1bfa25b86afee6191679c8e74904e96c327bba1db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/p13n-dialog-popup/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/p13n-dialog-popup/media_151c7773aec722459550cdf5e511017c2c3bfe25e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control ...","intro-desc":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/output-management/media_147f032d680639911c698dfb0a49783e2d38b6027.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/quick-prompts","title":"Quick Prompts","version":"","breadcrumbs":"UI Elements / Quick Prompts","lastModified":1777125717,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Target Design","description":"Prompts that are integrated into workflows for easy access.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15521cdc19086a69113c5d133de4a19088283c8b0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1777125715,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_148bbea2921a2dd5eb5077ecc04a31d9b19571a0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/progress-indicator-web-component","title":"Progress Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777125717,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17e6ba61edbf193ed04336491e337a5bada4ead16.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777125717,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1d0ddb97dab143a0fb0cc254e84062a11ff513418.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1777125715,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1cfbb18f53b08a0e79b04761ee93283e7f4bf4aeb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such ...","intro-desc":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/popover/media_16cdf1820e1e2720930c0adaba2d6c797ce881305.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator shows how far a process has progressed or been completed. A horizontal bar filled with color represents the level of completion, and ...","intro-desc":"The progress indicator shows how far a process has progressed or been completed. A horizontal bar filled with color represents the level of completion, and the value is displayed on top of the bar as either an absolute number or a percentage.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/progress-indicator/media_1844020badd3e55dac7d6c2a244e259dd5cacb36e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1777125715,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The popover displays additional information for an object in a compact way and without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ef10ce7144fcd1f476d52aa93beb1969ee27efff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/popover-web-component","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1777125715,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A popover is a small overlay window that appears on top of the existing content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17a0892f503684b520d4fc93fc31947c40efc06fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125715,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover opens when the user clicks on a triggering text link or button. The popover appears next to the trigger component, but doesn’t obscure ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/popover-web-component/media_13cf2e64bee26072c9ece06244fca9339e948d4ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/progress-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125717,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator lets you use a value state to convey semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/progress-indicator-web-component/media_1765ecfd6e380f478c39d36ef6716709c27f27098.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/planning-calendar/media_1d029dd975301f7ba3629ef3938c58002575c9e7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/quick-prompts/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In generative AI, prompts serve as crucial tools to direct the AI's output. Clear and effective instructions ensure that the output aligns with the user’s ...","intro-desc":"In generative AI, prompts serve as crucial tools to direct the AI's output. Clear and effective instructions ensure that the output aligns with the user’s needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/quick-prompts/media_1b99bdf48c649e1a232c2959ebb954a79519a04c8.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/process-flow/media_1b3b1b8be78eb186eac11e2b1d70bdf40ae708923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/range-slider-web-component","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1777125733,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A range slider enables the user to select a value range within a given numeric interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_104090c8e865fcd6f8162bfa595796ddf31faef8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/regenerate","title":"Regenerate","version":"","breadcrumbs":"UI Elements / Regenerate","lastModified":1777125734,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Target Design","description":"Allows users to iterate and refine AI-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17a86884bd8d050d55a8ab8e796d48017d8de239f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/radio-button-web-component","title":"Radio Button (Web Component)","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777125733,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Radio buttons provide users with a set of mutually exclusive options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1212c79c9968d644ce5d9a6ab1218fe882b2bd57d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rating-indicator-web-component","title":"Rating Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777125734,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rating indicator can be used to rate content or to indicate a rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_16de02282256dc080f171841e7168771a3eb16302.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1777125732,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17925cf8eeb172d5cbdcbac33f52abb13026865ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rating-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/rating-indicator-web-component/media_140e678084c6e75ea2a1697020d05df22d86a805c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777125732,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Radio buttons provide users with a set of mutually exclusive options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12fd7df1828ad35aaa68bf92a08c68c5c19dd1dba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1777125732,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The goal of the radial chart is to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19624546162ab9e6a768a141d5a784da4da746a15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1777125733,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17f8eda2cfe03e9022456ad449c1a949d7927cc17.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777125733,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1a76a049d32baf29704965e3c476de5a7018f1a55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/quickview/media_1c26630b4d844c4a3a3b964ac55788481a644a054.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/radio-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each option is represented by a radio button.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/radio-button-web-component/media_11caa85173e10d1c8a2d4f1838ed460ddea510eea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125732,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/range-slider-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider enables the user to select a value range within a given numeric interval.","intro-desc":"A range slider enables the user to select a value range within a given numeric interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/range-slider-web-component/media_18a2e9b1ff403c1a64ca0214338360921871f8612.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/rating-indicator/media_1724e262e70ee94a5a5df04e2596525fabbd01139.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","intro-desc":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/range-slider/media_195000c99f11144bb8b693eb66e0e459c965b89a1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/radio-button/media_13f43fbead2716b11c1a0dd9432dfaf5d2b8d880f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/regenerate/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The regenerate pattern provides a general approach for using AI to create or modify content across different scenarios. It lets users generate alternative AI results ...","intro-desc":"The regenerate pattern provides a general approach for using AI to create or modify content across different scenarios. It lets users generate alternative AI results or update existing AI-generated content, such as text, images, or other digital items, with the help of AI. Users can also iteratively refine the results to better match their needs or preferences.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/regenerate/media_17a86884bd8d050d55a8ab8e796d48017d8de239f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-popover-web-component","title":"Responsive Popover","version":"","breadcrumbs":"UI Elements / Responsive Popover","lastModified":1777125749,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The responsive popover displays as a popover on desktop and tablet devices but as a dialog on phones.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_16aa8d95d50ada397d64e3052a18bbc0d237a8983.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782338686,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1782338686,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1777125749,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table contains a set of line items and is fully responsive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ec5bf5802ea135f739db35c25ecf3e66bb073903.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125749,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive popover is shown as a dialog on a phone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/responsive-popover-web-component/media_19d1db3a993cd76e14fc581883b019cd5ce203d29.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/media_14e178a516a2d1718be8b1ad27b69e14ca2df7e4b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb ...","intro-desc":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/category-navigation/media_16ea748199d8c402123173db74045f3537b3b5388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items ...","intro-desc":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/responsive-table/media_172bfc0c08f7bd5be17c5648984cce48c777a8808.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1777125766,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A search is a means of accessing information quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1eed5318d4abc4417f7da320fd154933a3cabc32e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1777125766,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12e258a67c000175487319931f96b94a3e26c6c44.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1777125765,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor (RTE) is a complex control for data input and editing.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_155931ae82bd21814c697d788961052c6725983c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/segmented-button-web-component","title":"Segmented Button","version":"","breadcrumbs":"UI Elements / Segmented Button","lastModified":1777125767,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A segmented button is a group of buttons that can be toggled.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12a2914a5db8d96c17839ebf5a16d29d9bf47525f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/scroll-container","title":"Scroll Container","version":"","breadcrumbs":"UI Elements / Scroll Container","lastModified":1777125766,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The scroll container is an empty area that can be filled with content, such as other UI elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1677cba63b54be6c3a43c17e4ba9898a47c5d5d81.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/scroll-container/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","intro-desc":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/scroll-container/media_1685d43a2e70460d15841eee27d8a56c3ad9d4b3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/segmented-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125767,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Note: The segmented button can be configured to start with no items selected. However, additional customization is required to enable this functionality.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/segmented-button-web-component/media_15e25903dd3622d3538043c5c9bc5846a395e20bd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125767,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/search/media_173c464bcffb8da1ceed059355bddeceb7346eae8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/rich-text-editor/media_1cf597db92b8fea0a2472ba77f283803cce6c2a27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1777125780,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_11267a0a454f16fe9e5723e0e4620135e385b2fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/side-panel","title":"Side Panel","version":"","breadcrumbs":"UI Elements / Side Panel","lastModified":1777125781,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1e49a42204dc153ede9feca6a39032fa2996f9f20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/side-navigation","title":"Side Navigation","version":"","breadcrumbs":"UI Elements / Side Navigation","lastModified":1777125781,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The side navigation component provides a vertical menu that allows users to access different sections or pages of an application. It can be opened via the hamburger menu in the shell bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_18d0c1bab1faf5a7c714f5d38d01e402ced5e90fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/shell-bar","title":"Shell Bar","version":"","breadcrumbs":"UI Elements / Shell Bar","lastModified":1777125781,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The shell bar is a universal header at the top of all screens, providing product-specific and global functions like search, notifications, and user profile.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1726a5f025612aff33de22d48628635f73e445ae7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/side-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The side navigation component provides a vertical menu, allowing users to easily access different sections or pages within an application. It is accessed via the ...","intro-desc":"The side navigation component provides a vertical menu, allowing users to easily access different sections or pages within an application. It is accessed via the hamburger menu located in the shell bar. The side navigation operates in two modes: embedded and overlay. In embedded mode, users can expand or collapse the side navigation using the hamburger menu button. This mode supports up to 3 levels of nested items.\nLaunch modal","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/side-navigation/media_1da2805a65a6878096541357cdbe341fe1d63a74d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1777125779,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ccbbabb18a8015e35c88b7e79e22860a90fbf78f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1777125781,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15d03de686686ea38ad63b4fc4a0f38ce3d83ae7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/select-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125781,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/select-web-component","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1782338686,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select component enables users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_162724420532f65c99f99db00a71656a6d77fdfbf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/select-dialog/media_151d474f12215db531d4813d312889e5dd488b289.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/select-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select component enables users to select an item from a predefined list.","intro-desc":"The select component enables users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/select-web-component/media_117029138c1a507ab4012cd6f60c05cec8d647a02.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The shell bar is a universal header at the top of all screens. It offers both global functions (like search, notifications, and user profile) and ...","intro-desc":"The shell bar is a universal header at the top of all screens. It offers both global functions (like search, notifications, and user profile) and elements that are specific to the product context.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/shell-bar/media_1915a66ba01d4ad30534e3eba4211c1a02600f7ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/select/media_14f87bdc64bc20d6b1ebe6f4ec6457eb42ef2d9d0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/side-panel/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1781352945,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without ...","intro-desc":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page. It can easily be expanded and collapsed, depending on the user’s needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/side-panel/media_12ab0765a3bd29b6815fdf9a3d04cae3e71c07382.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1777125797,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Like the quick view, the smart link triggers a popover from a text link.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1f73ea6ce3a305e7f68b028062563fe520fc8844c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-list","title":"Smart List","version":"","breadcrumbs":"UI Elements / Smart List","lastModified":1777125797,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the smart list control to create lists or trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10c86fc4fb24df8abc6b8ae9e96bf01d40b75f3a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the smart list control to create lists or trees.","intro-desc":"You can use the smart list control to create lists or trees.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/smart-list/media_1b94ab65835677a74e9c0e573b679b916946adf82.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"UI Elements / Smart Filter Bar","lastModified":1777125796,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The smart filter bar uses annotations to create a filter bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1751acad9e349d267ae23af962c59dd028c4bde54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-field","title":"Smart Field","version":"","breadcrumbs":"UI Elements / Smart Field","lastModified":1777125796,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c75b9c0b9c0391ea939818c29ce80bbe89d4d5f7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1777125796,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1e7f235e196376a51ab0a23cf7e4a063595f2d79e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/slider-web-component","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1777125795,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider enables the user to adjust a single value within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17a4bc45a9ad9316f7c1aeae56e3228ae72a14610.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1777125795,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_18610d3e6b2649bc92240c40bf39fb6813cd6d739.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-form","title":"Smart Form","version":"","breadcrumbs":"UI Elements / Smart Form","lastModified":1777125796,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1d8bcedde2787a5b6485ad6c6b7e695b079bcc424.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and ...","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/smart-link/media_1fc9217782813e0c2c8c06bfd76d6a37237929542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider lets users select a value from a segmented or stepped range by dragging a handle along a track. It can be used for ...","intro-desc":"A slider lets users select a value from a segmented or stepped range by dragging a handle along a track. It can be used for adjusting settings such as volume, brightness, or price filters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/slider/media_1f66e8900a021ff46d810028b4512271515b71e80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-form/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for ...","intro-desc":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/smart-form/media_148f43ae8402e44ccb124c8141019c1cb70ae4d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/slider-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider enables the user to adjust a single value within a specified numerical range.","intro-desc":"A slider enables the user to adjust a single value within a specified numerical range.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/slider-web-component/media_1c3d2ea6e05d4d5379e07b401cae3d7c12f15da84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-filter-bar-annotations/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125796,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/smart-filter-bar-annotations/media_10b3bb212111088c2766c6dfcf7de3de41d88c661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/single-planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/single-planning-calendar/media_138330fed23841f66ba8e2a21aef216490a306641.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes ...","intro-desc":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/smart-field/media_13982ddaf16d568b28f5fbf53dd98b2079035ecbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1777125811,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1f59afd21ab46ecdfcf201b3ae090098a9e5e1145.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/split-button-web-component","title":"Split Button","version":"","breadcrumbs":"UI Elements / Split Button","lastModified":1777125811,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1dd4c322684ec2b73b2a0e2d36dad4c40ddfe1d0a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1782338685,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1e2db12d88fdcc1e7275a64d5a2f5594720e19b0f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1777125812,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1663e65d59dfd02c24490da956914b4522dd554bf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/split-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions ...","intro-desc":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/split-button-web-component/media_1894b0af2e0e0f089961ebc124d8bf1f885a28453.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1777125813,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c60bcc829ce26730d055d33f669332182894e007.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1777125812,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1b649afd30de67e5b9d03f2368a7764aea00a7b7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/step-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"The step input component allows the user to change the input value in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/step-input-web-component/media_10f2c203045f97335f4234b5b21a761b33466290e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1777125813,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_19a00fd65720aeef4af884eb7c87396f9db874966.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item is used in simple lists to display a single data point (title) or dataset, such as a product name with a ...","intro-desc":"The standard list item is used in simple lists to display a single data point (title) or dataset, such as a product name with a few attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/standard-list-item/media_1963eab28add4a5b354d4f2cd0f73a01277669909.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input component allows users to adjust numeric values in predefined increments (steps) using either buttons or direct input. It’s particularly useful when users ...","intro-desc":"The step input component allows users to adjust numeric values in predefined increments (steps) using either buttons or direct input. It’s particularly useful when users need to quickly change values like quantities or measurements without manually typing every number. The component supports both keyboard and mouse interactions, and it can be customized with minimum, maximum, and step values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/step-input/media_153cc2f7dae57cfad670c7c0a2715b6c39a3c1763.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125812,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/status-indicator/media_1204bd3d1e927fceef6f0f4c80ec470ebbd23a39d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. ...","intro-desc":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/smart-table/media_15a3d63fb7b794f9c62f68538c7cf4329b3c06339.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1777125829,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_114a6b3b3b51a554cbda796ac9090b3daff280b42.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tab-bar-web-component","title":"Tab Bar","version":"","breadcrumbs":"UI Elements / Tab Bar","lastModified":1777125828,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1af41fd7083a8ceb5d740b8b3b42b0f95084d2c56.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1777125828,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15ee59e203336cc98c179fee8b12e934722521f33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1777125827,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1282a8ef01d40759c30fa1958f45188c487939ee6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/switch-web-component","title":"Switch (Web Component)","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1777125827,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The switch mimics a physical switch. It allows users to toggle individual features on or off.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1f930d42673f32ec36e655babed33b1c414eaf1df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1777125827,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10f18fcdf5ab0c02427915434cdd7da325e1e9291.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/table-personalization-dialog/media_1c7b4b60cb1988ecc718fe3a83fc476697cc1dbee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/switch-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125827,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The switch mimics a physical switch. It allows users to toggle individual features on or off.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/switch-web-component/media_139abd798a02fc7e97f9cd206079c74655894299e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toggle switch mimics a physical switch. It lets users activate or deactivate individual features, like personalization or display settings.","intro-desc":"The toggle switch mimics a physical switch. It lets users activate or deactivate individual features, like personalization or display settings.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/switch/media_1487ce0d8c1d22584bd085bedd0d8296e10c2cbce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tab-bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to ...","intro-desc":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/tab-bar-web-component/media_1c2cdf8b858b40dbdf35043a1cefb22346c1291d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/table-bar/media_163843b8fd5478550baedcb91d0f0a29e66b20474.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-web-component","title":"Table","version":"","breadcrumbs":"UI Elements / Table","lastModified":1777125844,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A table contains a set of data that is structured in rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1fb8fdebd5be14599939bdca8babae49a27f8ed21.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1777125846,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_14ce0f38b209a709f302d9bdee6a74c581cc38210.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1777125847,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_176417f4ec2d05547ee8c9a4ea667508b28edaad1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text-area-web-component","title":"Text Area (Web Component)","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1777125845,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1d364a69ecf7428981beed3951da5428973b51469.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tag-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125844,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tag provides additional information about an object, such as a number or a KPI (Key Performance Indicator). It directs the user’s attention to specific ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/tag-web-component/media_1475fdf622d3b1064b36d82694496c72b7fd95166.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1777125844,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_16fcc0b87006a0c1975d98b046fddb0b094ed7200.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text-web-component","title":"Text (Web Component)","version":"","breadcrumbs":"UI Elements / Text","lastModified":1777125845,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Component","elementstatus":"Available","description":"You can use the text component to display a given text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_187a5069fa7724cafd7ee160b19ffb50bada6e6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1777125845,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_129686b427d649f08260937a7966e1b6aaafbba89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1777125844,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_16b27ce80f23ccd8053d8d77f08fe17e79f4a98c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text-area-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"The text area is an input component that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/text-area-web-component/media_156f6803910810902246a6842ef5e51c5aff5c943.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text-web-component/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the text component to display a given text.","intro-desc":"You can use the text component to display a given text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/text-web-component/media_161286b2e75853e8cb28af1007dc0ca94250b63b7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text control is used to display text within an application. It can appear in forms, tables, and content areas to present information. Its properties ...","intro-desc":"The text control is used to display text within an application. It can appear in forms, tables, and content areas to present information. Its properties include wrapping, truncation, and localization to ensure optimal display across devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/text/media_1b990fcb7d9cad7109c49b09952af9a0466f4cf23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tag-web-component","title":"Tag","version":"","breadcrumbs":"UI Elements / Tag","lastModified":1777125844,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A tag provides additional information about an object, such as a number or KPI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17abbacb5227bda343fd2a47f5698792ec61ddb41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/table-select-dialog/media_1429c80d6a6fc0224079b28b3d48696966ec64bea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker lets users select a localized time using touch, mouse, or keyboard input in 12-hour or 24-hour format. Users can either type a ...","intro-desc":"The time picker lets users select a localized time using touch, mouse, or keyboard input in 12-hour or 24-hour format. Users can either type a time directly or use the visual clock face to choose hours, minutes and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/time-picker/media_1a7734e5468a06b299b6918506c51fd43b1e21578.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that lets users enter multiple lines of text in a single field.","intro-desc":"The text area is an input control that lets users enter multiple lines of text in a single field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/text-area/media_133713cda04d6f67236b714ba0124b961f28ae445.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/table-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table contains a set of data that is structured in rows and columns.","intro-desc":"A table contains a set of data that is structured in rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/table-web-component/media_16aa7ce44bff38a270edb7dd91c79828f68b97401.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125846,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/tile/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toast-web-component","title":"Toast","version":"","breadcrumbs":"UI Elements / Toast","lastModified":1777125862,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A toast is a small, non-disruptive popup for a non-semantic success message that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_126afd6aea18f53541857d918e3b33e8d214c0243.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/title-web-component","title":"Title (Web Component)","version":"","breadcrumbs":"UI Elements / Title","lastModified":1777125862,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title is a simple, large-sized text containing additional semantic information about the header level for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10564776b4ef6e844b7cc839d5e9897081a7986c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1777125861,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1e0b0a5091fbff4f273225dc595265ca715948290.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toggle-button-web-component","title":"Toggle Button","version":"","breadcrumbs":"UI Elements / Toggle Button","lastModified":1777125862,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_156567cdb5ff32d7910c6db1c4b3d074ef36b2dbb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toggle-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).","intro-desc":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/toggle-button-web-component/media_10092e3b0f63f391663a912851d6d55b6235bd171.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toast-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125862,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/toast-web-component/media_172f6817aaa27ae3ea595e6302864c5122b62c5bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1777125863,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ad23c3a5cbb074522c5c375e1c10be81fbd75ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1777125862,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ecebc4042f2d61a0559c9555c96d823509d2e0cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/time-picker-web-component","title":"Time Picker (Web Component)","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1777125860,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_121e56bea8e93d377b3c03d223241b2304a7f0c9f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/time-picker-web-component/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/time-picker-web-component/media_1c2eb3f1954a95e27ea462a94757df40738214dff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/title/media_1150a96d93b5d339277efc23ab7a6e74867a9f0e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/title-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125862,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/token/media_14fbab56aa299c216ee66f06c2c3471ec8dc18d1c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/timeline/media_1dcd077da9d47cc6a44b0bc14850766113aaff1fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1777125878,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_10a808cf53bde211261c8c6463b34a9e3046cd93e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1782338682,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_15b0422b7e582e1ddc7ce9908fbc1b3e41c7e8b79.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1777125879,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_149cfbba7d4c0c1b70b9ce962c576c8113ee7c05d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/translation-of-textual-user-input","title":"Translatable User Input","version":"","breadcrumbs":"UI Elements / Translatable User Input","lastModified":1777125879,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_17414c3b4e763744cc278b944766d61e29eb3147e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toolbar-web-component","title":"Toolbar","version":"","breadcrumbs":"UI Elements / Toolbar","lastModified":1777125879,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12998514bcca1c31bceb43a812ebcbba3d43a8b15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toolbar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"A toolbar is a flexible container that can hold various other components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/toolbar-web-component/media_15e3fbed46b86cc85fea60e1cfd906261a2b99cfd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125879,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/translation-of-textual-user-input/media_19826614d2de03b2d74ad812c26c5b0af122e6fca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/toolbar-overview/media_10a55f77e8bf4167b477ce68e6a8ef7d2b29b2a8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/tree-table/media_12c2920fb57e11f0b4a2d61dda3a3659f389b340b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/tree/media_1c428ab6c8f9d62ace9804f3fc9ddddd74cff713d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/user-menu","title":"User Menu","version":"","breadcrumbs":"UI Elements / User Menu","lastModified":1777125897,"designowner":"Core Design CAX","uielementstechnology":"Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented by an avatar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1911a1133ae10544952e19f5a3513f623c7ab9baa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1777125896,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1e4c5702f9e6851a9883582de19aa25283536350f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree-toolbar","title":"Tree Toolbar","version":"","breadcrumbs":"UI Elements / Tree Toolbar","lastModified":1777125895,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The tree toolbar always appears above a tree or tree table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1302bccd8ab0bdfec92c883967bc0485805987389.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/upload-set/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125897,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set component has been replaced by the new upload set with table component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/upload-set/media_185115ae441ee05dbe93fce6239aa1c34088d95d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/upload-set-with-table-plugin","title":"Upload Set with Table Plugin","version":"","breadcrumbs":"UI Elements / Upload Set with Table Plugin","lastModified":1777125897,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Tables and Lists","elementstatus":"Available","description":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1aba95cc469fc709d8ec6a13d11ba9c2a4338ec53.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree-web-component","title":"Tree (Web Component)","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1777125896,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Trees provide a way to display and work with basic hierarchical data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ff9aabb633a5ec35d6e25203d30c8b4c35bae981.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/upload-set-with-table-plugin/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, ...","intro-desc":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, or phone) to an SAP Fiori app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/upload-set-with-table-plugin/media_1379fc67197900e632d5964ef3cb1ce582182e72a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/upload-set","title":"Upload Set","version":"","breadcrumbs":"","lastModified":1782338564,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/user-menu/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented ...","intro-desc":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented by an avatar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/user-menu/media_1b1dc22c598ac90f2522e60cb8f665aa4968c0e63.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1777125897,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12284cb2338dfed809608068b2a99b22967e99d2e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/treemap-chart/media_1f3805fe7c9043deea0280e4d12a19bd782cfc617.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777125896,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard tree item (ui5-tree-item) is the simplest type of tree item. It provides the most common features, such as text, icon, and a checkbox ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/tree-web-component/media_1e84246a9cefa11c380bf84b2449fe823993f4684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/tree-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","intro-desc":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/tree-toolbar/media_12073c022978cfe0a3087cb53b94eefa5791f0283.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","intro-desc":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/value-help-dialog/media_1fd34221a75309df9689cb0b23e9f9ca8a59fbd70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/variant-management","title":"Views (Variant Management)","version":"","breadcrumbs":"UI Elements / Views (Variant Management)","lastModified":1777125910,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_14e7e41f0812546a10deac89d05634542f274200c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/card-header","title":"Card Header in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Card Header in the Web Card System","lastModified":1782338683,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as the title, subtitle, and status of the card.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media_18d73d71c7de6fa8676e98cf8244e9f333e34188a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1777125911,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_13f39637d12f06bde03f1956901baae0f5e3f9626.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1777125912,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1eb21be323538926dcef62f479733bea61f9ce2ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons ...","intro-desc":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/view-settings-dialog/media_18ac0065e367d3ffa15c71931aba77594965c8a3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1777125913,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c4986b1d8a01b6f9f2e3a70e2b2bb5022b6e297c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system","title":"Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System","lastModified":1782338683,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most pertinent information or a teaser pointing to more details on a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1ad6b4e026cdc404382cbb27505b8561ded4d054b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/card-header/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as ...","intro-desc":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as the title, subtitle, and status of the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/card-header/media_10cfa5421640afe1e7676179dc683fd2f36a5262a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/visual-filter-bar/media_18aca500d03f7c65b77c3d319cb939cffd19390a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak ...","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/variant-management/media_16e7eb31b3d9c6b01aa2f8f3e07f13e4a7f492129.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125929,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message page component has been replaced by the illustrated message component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/message-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"","lastModified":1782338558,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1777125928,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_12e09112c19ba4784967fe7bb481697096d7b70af.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/web-card-system-card-navigation","title":"Card Navigation in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Card Navigation in the Web Card System","lastModified":1782338560,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Target Design","description":"Outlines how to select the right card navigation pattern, based on card complexity and group consistency.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media-in-web-card-system/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The media block feature enables cards to spotlight special content for the user. Media blocks are usually used in two ways:","intro-desc":"The media block feature enables cards to spotlight special content for the user. Media blocks are usually used in two ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media-in-web-card-system/media_1e672eb3ec52a5095b14b595060548fc7171dc234.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"","lastModified":1782338560,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media-in-web-card-system","title":"Media in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Media in the Web Card System","lastModified":1777125927,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"Using images on a card or banner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media_1e5dc29cbf2543dc15090c40a374f131dbd88b504.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/web-card-system-badge","title":"Badge in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Badge in the Web Card System","lastModified":1777125927,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Target Design","description":"You can use badges to display information about the card status, such as new, updated, or pinned.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media_17577c3126506c9d4255dafd83169c8a05da73766.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/web-card-system-badge/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use badges to display important information about the card status, such as New, Updated, or :pushpin-off: (pinned).","intro-desc":"You can use badges to display important information about the card status, such as New, Updated, or :icon-pushpin-off(pinned).","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/web-card-system-badge/media_1efa721b45464dcc9ce355f3da76358765321e1e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125927,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/web-card-system-card-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards typically serve as previews, offering users a glimpse of more detailed information and functionality. To facilitate navigation, users can interact with the card itself.","intro-desc":"Cards typically serve as previews, offering users a glimpse of more detailed information and functionality. To facilitate navigation, users can interact with the card itself.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/web-card-system-card-navigation/media_1f8643650913e34f14e48aa09be8c6a7abbd86889.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most ...","intro-desc":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most pertinent information or a teaser pointing to more details on a given topic or issue.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/web-card-system/media_105df4cee503fd76b26953bcd408f2b7051e0d522.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/wizard/media_1dbf1c997b206d1453cc9a04b32c515252d4439a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/community","title":"community","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/p13n-dialog/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the new P13n Dialog page below for the most recent updates.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/p13n-dialog/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1782338531,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/frameworks/analytical-frameworks/media_194dc5c4bd866639108dc42f27e8c5f94b3c64ab9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-date-range","title":"Dynamic Date","version":"","breadcrumbs":"","lastModified":1782338684,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.108.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/upload-collection/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection component has been replaced by the new upload set component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/upload-collection/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"","lastModified":1782338534,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1782338538,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","intro-desc":"[external_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"","lastModified":1782338533,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover","title":"discover","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71","title":"v1-71","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-products/sap-s4hana-only","title":"sap-s4hana-only","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/frameworks/media_1ca4a07eaf7a0e64e42e22b75a0e512d60347e450.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1782338684,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/community/newsletter","title":"Newsletter","version":"","breadcrumbs":"Community / Newsletter","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Design Newsletter is sent out every two weeks and contains valuable information for all SAP Fiori designers, POs, developers and interested colleagues.","intro-desc":"The SAP Fiori Design Newsletter is sent out every two weeks and contains valuable information for all SAP Fiori designers, POs, developers and interested colleagues.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-products","title":"sap-products","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/get-started","title":"get-started","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/sap-fiori","title":"SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / SAP Fiori","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of ...","intro-desc":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/media_10203c9efe37f765d5bb8f8adc8bcedfee57c6818.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, ...","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/versioning","title":"SAP Fiori for Web – Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and ...","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Environment","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and ...","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/contextual-filter/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Filtering options are now covered by the filter bar and table toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/contextual-filter/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/community/contact-us","title":"Contact Us","version":"","breadcrumbs":"Community / Contact Us","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community on SAP Jam to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Culture as we understand it follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777125940,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent ...","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777125941,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/whats-new","title":"What’s New in Guideline Version 1.70","version":"","breadcrumbs":"Discover / What’s New in Guideline Version 1.70","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with the guideline version 1.70.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with the guideline version 1.70.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/dynamic-date-range/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There’s now a dedicated dynamic date range component with a new guideline page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/dynamic-date-range/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1782338532,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Ways of Acting","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Ways of Acting","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Peoples’ ways of acting are inclined to a variety of cultural aspects that can also influence their day-to-day jobs. The aspects may include e.g. socio-cultural ...","intro-desc":"Peoples’ ways of acting are inclined to a variety of cultural aspects that can also influence their day-to-day jobs. The aspects may include e.g. socio-cultural norms and conditions, beliefs, attitudes to responsibility and initiative, established practices, demograpics and technology trends.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-136/ui-elements/menu-button/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777125939,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The individual button guidelines have been consolidated in one button guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/menu-button/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to display messages to the user, such as errors, warnings, success messages, confirmation, and information. You can choose from various controls ...","intro-desc":"This article describes how to display messages to the user, such as errors, warnings, success messages, confirmation, and information. You can choose from various controls to display different types of messages. All errors must be easily visible (highlighted) and clearly identifiable on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/messaging/media_1abc1b27e62603a7880ecb7f326ca3972e4d2a4b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section outlines the foundations of the SAP Design System for web applications.","intro-desc":"This section outlines the foundations of the SAP Design System for web applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – like emojis, street signs, or warning ...","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – like emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation ...","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/navigation/media_1a1515ddab96bf0060b7cdd17199db24ac5b3ec8f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze ...","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/frameworks/analytical-frameworks/media_1e18a5087e7f9851da28696b366583b333eacc373.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"UX Role Guidance","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / UX Role Guidance","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for mapping a business role to SAP Fiori, including:","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"Foundations / Best Practices","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be ...","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe ...","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience. But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/discover/sap-design-system/vision-and-mission/media_1d0b9e552a9625b9032b6dc419483b22fa0da1b1e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777125954,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Manage Parts of an Object","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Parts of an Object","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1d6141f28a4b48bf3c961d2cd39c458e406d0eb0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1c399e258b8a967fb466450cc740d61586c5cd4ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Manage Objects with Subpages – Global Flow","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects with Subpages – Global Flow","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the global flow with subitems if you want to let the user navigate freely between the main page and multiple subpages in one editing ...","intro-desc":"Use the global flow with subitems if you want to let the user navigate freely between the main page and multiple subpages in one editing session (one object, such as a sales order as the main object with sales order items as closely related subpages). In this case, the subpages do not have an explicit Create or Save button. Any changes to the subpages are saved automatically in the background (temporary save). After editing, the user has to navigate back to the main page to save or discard the changes to all subpages. If you want to keep unsaved changes, you need to implement draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_177e426ec24f37ebb6a66bf16bc9b4081f669657a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Forward / Forward","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you ...","intro-desc":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you can forward one or several objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_15638fe19ef863496cb353f926e41feaab9026da2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Manage Objects – Create, Edit, Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects – Create, Edit, Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section describes the different interaction flows for managing objects. These flows include create, edit, and delete. They can be used for all floorplans, depending ...","intro-desc":"This section describes the different interaction flows for managing objects. These flows include create, edit, and delete. They can be used for all floorplans, depending on the use case and the type of object being processed, such as:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_15dd2ddeb7c8c735fb8adfed46419bcea7d189ce9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/copy","title":"Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Copy","lastModified":1780061421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Manage Simple Objects","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Simple Objects","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the flows described below to create, edit, or delete simple objects without subpages. If the object has subpages, use the local flow or global ...","intro-desc":"Use the flows described below to create, edit, or delete simple objects without subpages. If the object has subpages, use the local flow or global flow instead. The main floorplan for managing objects is the object page, but other floorplans are also available, such as the wizard. If none of the existing floorplans fit the use case, you might need to design a freestyle floorplan. For a summary of the available floorplans, see the floorplan overview.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1679a6cbbcdc08b3c31a85c2cb3ddb19354513492.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Manage Objects with Subpages – Local Flow","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects with Subpages – Local Flow","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the local flow with reference items if your object has subpages and your system setup requires every subpage to be saved separately (different objects, ...","intro-desc":"Use the local flow with reference items if your object has subpages and your system setup requires every subpage to be saved separately (different objects, such as a sales order and contacts). To leave a subpage in edit mode, the user has to save the changes, or discard them. To keep unsaved changes, you need to implement draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1f1984b9cba295779ea60072789c7a2c862ee5c67.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically ...","intro-desc":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically in the background whenever users add or change information within a business entity while in edit state (auto-save).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1e007b8fd8ffe90a778d2ffdf136c4b8fb282611d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1777125970,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782336770,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782336770,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1777125970,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage leading and trailing white space (blanks) when copying and pasting text into input controls (such as input fields, text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/media_1e97ed463ceeac3c2a90475ba728c27b06adf710b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1777125970,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In general, use long text to display units of measurements, and do not use abbreviations, such as (ISO) codes.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data ...","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level ...","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/media_19b4d8acebd404a763b81a18865614e0e2f278d1d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization can be used to modify the display and settings of a table.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/tables/media_16e7eff1ce9aa0a163ea4d7575d21fe4bae83b3ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/media_13644b2415a68102744ca17058c5c18d2a0dfb3ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","intro-desc":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/media_15e637c9065c8183ab80afc35384734c5fc0dc775.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain ...","intro-desc":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/tables/media_1e5ba7aab0c660aba18e6962768aed5d2ebc12e37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Mass Editing","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Mass Editing","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing allows users to change multiple (homogenous) objects simultaneously. Usually, these objects are selected from a list or table and have most or all ...","intro-desc":"Mass editing allows users to change multiple (homogenous) objects simultaneously. Usually, these objects are selected from a list or table and have most or all of their changeable facets in common, such as Object Name, Object ID, or Description.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/global-patterns/object-handling/media_1485989edc7597b4c86661d9d34178e3f60039ff4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1777125971,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/media_12a30a055ad0ca21d948d309f4862f9cd4d865e19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1777125985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services","title":"integration-and-services","version":"","breadcrumbs":"","lastModified":1777125984,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Run SAP Fiori launchpad as a native mobile application on iOS and Android.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777125985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1777125984,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder allows you to browse all SAP Fiori, SAP GUI, and Web Dynpro ABAP apps in one place. It is available whenever you ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_13ba1291ffd940838846eceac47655f24ccc9df23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Selection Controls – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Selection Controls – Overview","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article offers guidance on when to use the following selection controls:","intro-desc":"This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Client","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori Client is a native application runtime for running the SAP Fiori launchpad and applications on Android and iOS devices. It can be downloaded ...","intro-desc":"SAP Fiori Client is a native application runtime for running the SAP Fiori launchpad and applications on Android and iOS devices. It can be downloaded from the Apple App Store or Google Play Store, or installed automatically by a system administrator. Entering the URL establishes the connection to the SAP Fiori server. SAP Fiori can then be used in the same way as in the browser.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_1de5d3125f387e845023bdaeb27a46ffb7a35a132.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1777125984,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/best-practices/ui-elements/media_1cf498607f791678a5966719ae61dc47368042ad0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"Merged Header","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Merged Header","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As of SAPUI5 version 1.40, the shell bar and the application page bar are merged into one single bar: the shell bar.","intro-desc":"As of SAPUI5 version 1.40, the shell bar and the application page bar are merged into one single bar: the shell bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_1edd44335ef9c9d06b1c3c5dcabe74c19f75815ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad – Overview","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and ...","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_134f1b6d74ebc2dc85fa77b8fba9946541e32bcae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad home page is the first page that users see after they have logged in. It is the main entry point to ...","intro-desc":"The SAP Fiori launchpad home page is the first page that users see after they have logged in. It is the main entry point to SAP Fiori apps on mobile and desktop devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_15ccc0c955369a420535ace35319ca8c22e1a5843.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1777125984,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After entering a search term, users can trigger the search by pressing ENTER, by clicking the magnifier icon, or by selecting one of the suggestions. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_1eca8d49e6bc8cb2c6055a09d47787c5a723254fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/integration-and-services/sap-fiori-launchpad/media_1c8f28b272f0ca768f51daf84c83aac56711e703e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/version-template/metadata","title":"metadata","version":"","breadcrumbs":"","lastModified":1777280358,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"[ { \"URL\": \"/design-system/fiori-design-web/discover/**\", \"version\": \"\", \"category\": \"discover\" }, { \"URL\": \"/design-system/fiori-design-web/**/discover/**\", \"version\": \"\", \"category\": \"discover\" }, { \"URL\": \"/design-system/fiori-design-web/foundations/**\", \"version\": \"\", \"category\": \"foundations\" }, ...","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover","title":"Discover","version":"","breadcrumbs":"","lastModified":1782340219,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297500,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145","title":"v1-145","version":"","breadcrumbs":"","lastModified":1777297499,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297499,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1782340137,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/analytical-list-page-overview-page-sap-fiori-elements-2","title":"Analytical List Page / Overview Page","version":"","breadcrumbs":"","lastModified":1782340301,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.142.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/media_1eaa17eea275ca81091e4199d8ae05b8a7163d1d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/get-started/web-components-overview","title":"SAP Web Components","version":"","breadcrumbs":"","lastModified":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The component guidelines for SAP Web Components and SAPUI5 are being merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/get-started/media_1fe63deac4ec22a90fa9acf174e18a5bf4bdd812a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1782340140,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/object-page-overview-sap-fiori-elements","title":"Object Page – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/media_1c7f8686593bb09b62b13d2f5fca6e76ae02177fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown enables the user to view and analyze the data of one key performance indicator.","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1782340156,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intercultural UX design ensures usability and positive experiences by considering cultural and contextual differences in business environments.","intro-desc":"Culture, as we understand it, follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis of these webs is concerned with the ways people find meaning in the world.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/get-started/ui-elements-overview","title":"UI Elements (SAPUI5)","version":"","breadcrumbs":"","lastModified":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The component guidelines for SAP Web Components and SAPUI5 are being merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/get-started/media_159081a52050ba53a101c7e33dcd5628729bbb3c9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/list-sap-fiori-elements","title":"List (SAP Fiori Elements)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / List","lastModified":1782340139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements template helps enable the display of a list in the list report","intro-desc":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/list-report-content-area-fiori-elements","title":"List Report – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports simple content layout, multiple view layout, and multiple content layout","intro-desc":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/list-report-header-sap-fiori-elements","title":"List Report – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Header","lastModified":1782340213,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/ai-features/ai-input-assistance","title":"AI Input Assistance","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / AI Features","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI input assistance eases data entry for a new or existing object by recommending values for the input fields, based on previous input or business data.","intro-desc":"AI input assistance eases data entry for a new or existing object by recommending values for the input fields, based on previous input or business data. The intelligent suggestions are displayed as recommended values in the input fields for users to accept or to reject.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/ai-features/media_1281d3b8dc3fe49b96107778160bbda4d82ed62ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/replacing-placeholder-text","title":"Replacing Placeholder Text","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Replacing Placeholder Text","lastModified":1782340139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for replacing the placeholder text","intro-desc":"Onscreen text and messages that are familiar to users in their business context simplify their work.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements","lastModified":1782340140,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For the design options available with SAP Fiori elements framework and for AI features implemented with the framework, see the articles below.","intro-desc":"For the design options available with SAP Fiori elements framework and for AI features implemented with the framework, see the articles below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Analysis Path Framework enables users to create interactive, chart-based analytical drilldown apps for exploring and investigating KPIs from multiple data sources.","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/analytical-frameworks/media_13c0a32cf660ff94271312170ee2634f9f375c3b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/smart-templates","title":"SAP Fiori Elements – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI-development framework of choice for all projects, the SAP Fiori elements framework:","intro-desc":"The UI-development framework of choice for all projects, the SAP Fiori elements framework:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/media_1b0cd14a870b2c7ed05b87813f8ee717b45a23c70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/find-information-and-get-help","title":"Find Information and Get Help","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Find Information and Get, Help","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here, you will find selected information assets to help you:","intro-desc":"Here, you will find selected information assets to help you:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/media_164f2612f4ee06d52fb0f0706dd29206cb033b26b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/table-types-sap-fiori-elements","title":"Table Types","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types","lastModified":1782340139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the different table types","intro-desc":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1777297502,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1782340153,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/get-started/ui-elements-sap-design-system","title":"UI Elements in the SAP Design System","version":"","breadcrumbs":"Discover / Get Started / UI Elements in the SAP Design System","lastModified":1782340152,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori UI elements and how they are documented.","intro-desc":"This page explains what “UI elements” are in the SAP Design System for web, introduces our key implementation technologies – SAPUI5 and SAP Web Components – and describes how guidance for these technologies is presented in the component guidelines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1782340151,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications","intro-desc":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/tables-toolbar","title":"Table Toolbar (SAP Fiori Elements)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Toolbar","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/media_104a4cc90b3026bd75b11042940583fa5b5548916.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1782340154,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, it's important to consider their local meanings to ensure they enhance user experience and business processes.","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/object-page-content-area-sap-fiori-elements","title":"Object Page – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page content area","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/media_11fd078b8b3628d4618205383af52e7d4aa52da69.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/object-page-footer-bar-sap-fiori-elements","title":"Object Page – Footer Bar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Footer Bar","lastModified":1782340138,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page footer","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only","title":"SAP S/4HANA Only","version":"","breadcrumbs":"","lastModified":1782340218,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/ai-assisted-error-explanation","title":"AI-Assisted Error Explanation","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / AI-Assisted Error Explanation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI-assisted error explanation helps users understand and resolve the errors and warnings that they encounter when working on an object page in an application developed with SAP Fiori Elements.","intro-desc":"AI-assisted error explanation helps users understand and resolve the errors or warnings that they encounter when working on an object page in an application developed with SAP Fiori Elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_1d4fd0e6f8ae46fe7f3cb2596fc4e510a9ba92199.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Intercultural UX – Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural UX – Environment","lastModified":1782340154,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Local factors like technology infrastructure, network connectivity, and power reliability must be considered in UX design to ensure a seamless user experience.","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/table-rows-sap-fiori-elements-2","title":"Table Rows","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Rows","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/media_1948a2122825f177b562e760408c8a2a24ccbb7f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/navigation-menu","title":"Navigation Menu","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Navigation Menu","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The navigation menu is always a click away to provide users with quick access from one area of S/4HANA Cloud to another so they can work efficiently.","intro-desc":"The navigation menu is always a click away and provides users with quick access from one work area to another. To optimize their navigation flows, users can personalize the menu with their most used spaces and their favorite S/4HANA Public Cloud apps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_1e481f5c50b31ee9c5f6d35308ba5529b1a4d1a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1782340153,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori delivers a consistent, intuitive, holistic, and simple user experience by creating visually appealing designs","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Cultural Differences in Needs and Behavior","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Cultural Differences in Needs and Behavior","lastModified":1782340155,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cultural factors like norms, beliefs, and technology trends influence how people work and interact, impacting design decisions.","intro-desc":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects may include socio-cultural norms and conditions; beliefs; attitudes to responsibility and taking the initiative; established practices; demographics; and trends in technology. They may also have an impact on design decisions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1782340155,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with our design principles, design-led development process, and multi-device approach.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1782340155,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/product-standards/ux-consistency","title":"UX Consistency","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / UX Consistency","lastModified":1782340155,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design reduces cognitive load and ensures a cohesive, intuitive user experience across all products.","intro-desc":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/worklist-sap-fiori-elements","title":"Worklist","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Worklist","lastModified":1782340138,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings","intro-desc":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297500,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/get-started","title":"Get Started","version":"","breadcrumbs":"Discover / Get Started","lastModified":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here you’ll find everything you need to get started designing and building world class SAP apps that bring out the best in every business. The ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/media_1d2aa5e1079563183111d2f311518fae90aaf333a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/object-page-header-sap-fiori-elements","title":"Object Page – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Header","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/object-page/media_1648e6371a26398f6fbedc294b5e47e67b4599684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1782340155,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s design-led development process uses proven design thinking to ensure consistent, user-focused experiences across all applications and devices.","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/media_1ec9991d1adc6d26c349fbdfe17a171c1c93dc1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1782340154,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori aims to create intuitive, globally usable software for better usability and acceptance.","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products","title":"SAP Products","version":"","breadcrumbs":"","lastModified":1782340219,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home","title":"My Home in SAP S/4HANA Cloud Public Edition","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / My Home in SAP S/4HANA Cloud Public Edition","lastModified":1779348678,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"My Home in SAP S/4HANA Cloud Public Edition offers enhanced personalization, access to tasks, situations, news, quick navigation, and analytical insights.","intro-desc":"My Home in SAP S/4HANA Cloud Public Edition is the entry point to apps, and offers access to:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_1aaa67640564d00a8664873fabc3937e9f116cea0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/table-features-sap-fiori-elements","title":"Table Features","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Features","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements templates support the features and settings for a table detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/tables-and-lists/media_12321c0a2f81188ad0c3cbe00f0709256c9e04ef2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1782340152,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1782340140,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/ai-features","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297499,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/sap-fiori","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System / SAP Design System","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System provides a consistent user experience for SAP software across platforms and devices.","intro-desc":"The SAP Design System is a design system that provides a consistent user experience for SAP software across platforms and devices. It’s at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/media_1ebc11fcd0b84ce6782c2d725b67b2ba175adb6bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784625323,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility in SAP Fiori and SAPUI5 ensures inclusive design, with built-in features at the framework level and app-specific adjustments as needed.","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps provide a seamless, consistent experience across all devices, allowing users to work anywhere, anytime.","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/terminology-sap-fiori-elements","title":"Terminology for SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Terminology for SAP Fiori Elements","lastModified":1778064899,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements help you communicate better with the application developers","intro-desc":"To help you better communicate with application developers, this article presents development and design terms used in the context of SAP Fiori Elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/integration-of-classic-sap-uis-sap-fiori-elements-list-report","title":"Integration of Classic SAP UIs (SAP Fiori Elements List Report)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Integration of Classic SAP UIs (SAP Fiori Elements List Report)","lastModified":1779453915,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to navigate and integrate classic UIs for creating, displaying, and editing screens from a list report.","intro-desc":"This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some or all of these actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/frameworks/sap-fiori-elements/list-report/media_137a3107e4949629e0dbac7627abd70d05f747730.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling","title":"situation-handling","version":"","breadcrumbs":"","lastModified":1777297515,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/foundation/ai-icon","title":"AI Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Icon","lastModified":1777297517,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI icon can be used alone, in buttons, or alongside labels or text to indicate content powered or generated by AI. The embedded AI ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/foundation/media_1e33cac0ef525d2a57692090d6fc280718eecf9cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling-guidelines","title":"Situation Handling – Guideline Overview","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA Only / Situation Handling – Guideline Overview","lastModified":1782340131,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling ensures smooth business operations by automatically notifying relevant users about critical issues, such as consumed contracts, delivery discrepancies, and impending deadlines.","intro-desc":"Situation Handling ensures smooth business operations by automatically notifying relevant users about critical issues, such as consumed contracts, delivery discrepancies, and impending deadlines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/sap-s4hana-design-decisions","title":"SAP S/4HANA Design Decisions","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Design Decisions","lastModified":1782340131,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Contains all the design decisions for SAP S/4 HANA","intro-desc":"Contains design decisions for SAP S/4HANA. If needed, the respective guideline articles introduce the decisions with SAP S/4HANA Only.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/foundation","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Foundation","lastModified":1782340136,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the AI color palette for embedded AI and Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/versioning","title":"Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1779960921,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations","title":"Foundations","version":"","breadcrumbs":"","lastModified":1782340220,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design guidelines ensure consistency across products, with additional product-specific guidelines for tailored applications.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_12a7af32dcdde6d1dc193a9433388fe94cfb79fce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/system-information-bar","title":"System Information Bar","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / System Information Bar","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.","intro-desc":"With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_18b48e4c8f3df79437386c3df6f75f9e1b7fea017.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/foundation/ai-colors","title":"AI Colors","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Colors","lastModified":1777297517,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates the importance and association between UI elements and AI-powered features that enhance them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/foundation/media_1e42af22d41f3d2cb674e6e1ce86e9293e22bc193.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-145","title":"What’s New in Guideline Version 1.145","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.145","lastModified":1778492576,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.145.","intro-desc":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.145.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-124","title":"What’s New in Guideline Version 1.124","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.124","lastModified":1782340129,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.124.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.124.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-136","title":"What’s New in Guideline Version 1.136","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.136","lastModified":1782340129,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.136.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.136.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-128","title":"What’s New in Guideline Version 1.128","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.128","lastModified":1782340129,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.128.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.128.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-139","title":"What’s New in Guideline Version 1.139","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.139","lastModified":1782340129,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.139.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.139.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/situation-detail-view","title":"Situation Handling - Situation Detail View","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Situation Detail View","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered ...","intro-desc":"The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered the situation.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/media_18ab85828b1b9d5101165d6ea401415b23af397d9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/overview-in-a-situations-app","title":"Situation Handling - Overview in a Situations App","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Overview in a Situations App","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Situations app displays all situations in a user’s area of responsibility.","intro-desc":"The Situations app displays all situations in a user’s area of responsibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/media_1958721767ce48195c91982bbba32ffae3ead4544.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-126","title":"What’s New in Guideline Version 1.126","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.126","lastModified":1782340129,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.126.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.126.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/ranking","title":"Ranking","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/error-log","title":"error-log","version":"","breadcrumbs":"","lastModified":1782340220,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/situation-handling-controls","title":"Situation Handling - Controls","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Situation Handling Controls","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually: Initially, users ...","intro-desc":"Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually: Initially, users see the minimal display for a situation. They can seek additional levels of detail about it, according to their needs and goals.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/media_122fa8305bb7a1865512b64dcc67f175f05a449fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/learning-journey","title":"Learning Journey","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Learning Journey","lastModified":1779460180,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A collection of learning resources for app designers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/feedback-loop-in-intelligent-systems","title":"User Feedback","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new","title":"What’s New","version":"","breadcrumbs":"Discover / What’s New","lastModified":1777297516,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System guidelines are moving from experience.sap.com/fiori-design to its new domain at sap.com/design-system – don’t forget to bookmark your most used pages!","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/media_1e5358459744986ae3536869f07450e6780f99b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/designing-sustainable-gen-ai-experiences","title":"Designing Sustainable Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Sustainable Generative AI Experiences","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page highlights the importance of ethical, responsible AI innovation and sustainability in product design, guided by SAP's AI Ethics Policy.","intro-desc":"Creating product experiences that all people love has always been our compass. As we integrate generative AI into the experiences we craft, we must stay focused on harnessing its potential for good. As these technologies grow ever more powerful, those of us who build with it have an important duty – to put ethics before profits or any other priorities. We all play a crucial role in advocating for responsible innovation. You should always refer to our SAP’s AI Ethics Policy Handbook to learn more about AI ethics and our risk framework.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1bbff00a72ac042d0f979ea708b3631c82a9638cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/explainable-ai","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/explainable-ai-overview","title":"Explainable AI (XAI) – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI (XAI)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help users trust AI, it’s important to provide enough information about the model behind it and explain how and why it produces certain results.","intro-desc":"To help users trust AI, it’s important to provide enough information about the model behind it and explain how and why it produces certain results.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_160b8cb3cb9ca2b191b2483cc7d1d441e96b42178.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-122","title":"What’s New in Guideline Version 1.122","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.122","lastModified":1782340129,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.122.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.122.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/situation-handling","title":"Situation Handling","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling helps businesses run smoothly by automatically informing the right users about the issues that require their attention, for example, consumed contracts, pending confirmations ...","intro-desc":"Situation Handling helps businesses run smoothly by automatically informing the right users about the issues that require their attention, for example, consumed contracts, pending confirmations and approvals, deviating deliveries, and upcoming deadlines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/situation-handling/media_173754a7d980d39caa18928049982bdeb292a1b57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/building-trust-with-generative-ai","title":"Building Trust with Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Building Trust with Generative AI","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page discusses building trust in generative AI by ensuring transparency, user control, explainability, and fairness in SAP products.","intro-desc":"With all of the exciting advances being made in generative AI, there are also real ethical questions and concerns arising around things like accuracy, reliability, and the role that bias plays in what is being produced. As we start to imagine all the potential value that technologies like generative AI can bring to improving user experiences, customer outcomes, and more, it’s essential that we design and build trust into each and every interaction people have with our products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_110543980ca2999021760d547cd445162766a825e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Design-Led Development (DLD) process for S/4HANA and DSC enhances UX support, collaboration, and flexibility in design projects.","intro-desc":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_1ae5c2959796dec30e438debe112eb27b08d113ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design","lastModified":1782340142,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the guidelines to understand the basic AI design principles and what it takes to craft a good AI experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/designing-agentic-ai-ecosystems-and-experiences","title":"Designing Agentic AI Ecosystems and Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Agentic AI Ecosystems","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"mailto:ellie.kemery@sap.com","intro-desc":"As our world grows increasingly interconnected and our technology becomes increasingly intelligent, the design of agentic systems that are capable of autonomous execution and decision-making presents consequential challenges and opportunities. We all bear a significant responsibility to place humans and ethics at the forefront of our technology processes to prioritize the needs, values, experiences of users and the greater society. By doing this, we can create agentic systems and experiences that not only enhance user experiences, but also foster user empowerment and principles of responsible AI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_19d669eac03fa6629295a23435365a134057ae655.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/design-principles-for-generative-ai","title":"Design Principles for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Design Principles for Generative AI","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines SAP's generative AI design principles to ensure cohesive, high-quality experiences across all products.","intro-desc":"Generative AI can transform entire industries, and it’s already changing how we live and work. Its ability to generate novel content, whether text, image, data, or video, is a game changer. This technology is rapidly changing how we design, build and interact with software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_15dfc9c807154058f1158664ed9984d7a09553dc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/designing-safety-into-gen-ai-experiences","title":"Designing Safety into Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Safety into Generative AI Experiences","lastModified":1782340134,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines best practices for designing reliable, transparent, and robust generative AI systems, focusing on safety, explainability, and risk mitigation.","intro-desc":"AI safety is a big concern for a lot of people, and for good reasons. AI systems are becoming increasingly powerful, and if they’re not designed safely, they could pose a serious threat to humans and society.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/featured/meet-ai-writing-assistant","title":"Meet AI Writing Assistant","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All relevant content is now incorporated in the page for the AI writing assistant pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/featured/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/inner-source-process-for-sap-ai-experiences","title":"InnerSource Process for SAP AI Experiences","version":"","breadcrumbs":"","lastModified":1782340301,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/recommendations","title":"Recommendations","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/helpful-links-on-sap-ai-external","title":"Helpful Links on SAP AI","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/ai-design-roadmap","title":"AI Design Roadmap","version":"","breadcrumbs":"","lastModified":1782340301,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/ai-design-system-faq","title":"AI Design System FAQ","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design System FAQ","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the answers to the most common AI design questions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/ai-design-contact-us","title":"AI Design – Contact Us","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design – Contact Us","lastModified":1777297518,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to give feedback, get support, and collaborate with the AI Design team.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_1fe63deac4ec22a90fa9acf174e18a5bf4bdd812a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-130","title":"What’s New in Guideline Version 1.130","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.130","lastModified":1782340129,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.130.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.130.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/ai-design-quality-checklist","title":"AI Design Quality Checklist","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / AI Design Quality Checklist","lastModified":1782340133,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides an AI Design Quality Checklist with guiding questions and checkpoints to help design teams assess and improve SAP AI experiences.","intro-desc":"It is important to establish standards for the quality of SAP AI experiences. To get started, we are providing a first set of guiding questions and mandatory checkpoints to enable design teams to assess AI Design quality confidently and identify important follow-ups with technical experts. This AI Design Quality Checklist is also tied to the Design Intent Reviews and Design Excellence Reviews hosted by Chief Design Officer Arin Bhowmick.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/matching","title":"Matching","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/contact-sap-ai-design-team","title":"AI Design – Get in Touch with Us","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/joule-assistant/joule-experience-primer","title":"Joule Experience Primer","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This early Joule overview is no longer up to date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/joule-assistant/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/explainable-ai-building-explanations","title":"Explainable AI (XAI) – Building Explanations","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI / Building Explanations","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page explores how you can create local and global explanations for different progressive disclosure levels.","intro-desc":"This page explores how you can create local and global explanations for different progressive disclosure levels.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1cd4ce115b8d845572f13d0d9c09cc15ce734c279.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/featured/meet-regenerate","title":"Meet the Regenerate Pattern","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All relevant content is now incorporated in the page for the regenerate pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/featured/media_1ffc42d17f9ec0828fb13de32b29ef9ad7f157e2a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/joule","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule","lastModified":1782340132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the icon for SAP's conversational AI panel.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines","title":"AI and Joule Design – Guidelines","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Guidelines","lastModified":1779270126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Follow five guiding principles whenever you design generative AI features.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/important-links-on-ai","title":"Important Links on SAP AI","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI Design is moving fast. To make sure you catch the latest internal content, we’re moving content that may outdate between guideline releases to our ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/joule-assistant","title":"joule-assistant","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/featured","title":"featured","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/whats-new/whats-new-1-142","title":"What’s New in Guideline Version 1.142","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.142","lastModified":1782340130,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.142.","intro-desc":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.142.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"","lastModified":1782340219,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/designing-intelligent-systems","title":"Designing Intelligent Systems","version":"","breadcrumbs":"","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As the AI design system evolves, this page no longer reflects the latest developments.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/explainable-ai-principles","title":"Explainable AI (XAI) – Guiding Principles","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI / Guiding Principles","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page covers core principles and widely accepted best practices for explainable AI, or XAI. These concepts form the foundation for crafting your own explanations.","intro-desc":"This page covers core principles and widely accepted best practices for explainable AI, or XAI. These concepts form the foundation for crafting your own explanations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_142b6f03dff1adee6a7032c3bd83193eb4544c188.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1779110795,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/effective-ai-prompts","title":"Designing Effective AI Prompts","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Effective AI Prompts","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline covers best practices for designing effective generative AI prompts, including principles, patterns, and tips for optimizing user input and results.","intro-desc":"In the context of generative AI experiences, a prompt refers to the instruction given by a user to guide the output of a generative AI model.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/guidelines/media_1a4bd171b358cf8337c61385170a58f2e03a5b349.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/generative-ai-design","title":"Designing for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing for Generative AI","lastModified":1782340132,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP's generative AI strategy, including guidelines, best practices, and how to contribute to the design of business applications.","intro-desc":"Generative AI is the talk of the town. But what does it mean for the design of business applications? With this article, we want to give you an overview of where SAP’s generative AI strategy stands today, our approach to developing guidelines, patterns, and best practices and how everyone can contribute.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/ai-design-glossary","title":"AI Design Glossary","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design Glossary","lastModified":1779959507,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To provide you with some quick help on AI terminology used in or referred to within our guidelines for ‘Designing Intelligent Systems’, you can find ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/overview","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Overview","lastModified":1782340133,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about SAP's generative AI strategy, our approach to developing guidelines, and the foundation guidelines you'll need to get started.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/title-hierarchy-guidance","title":"Title Hierarchy Guidance","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Title Hierarchy Guidance","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how the efficient heading structure not only enhances visual hierarchy but also significantly improves accessibility for users.","intro-desc":"When designing and building web apps, organizing and managing headings is very important. A clear and consistent heading hierarchy, expressed visually through title styles and structurally through semantic heading levels, helps users scan and understand pages quickly while also supporting efficient navigation for assistive technologies. By establishing clear guidelines for using title styles alongside appropriate semantic heading levels, teams can create layouts that are intuitive, adaptable to different interactions and states, and easy to navigate.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_1691b6c1c1983b270ac1dc7abf0ef4fab7caab475.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"Business Roles and Tasks","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Business Roles and Tasks","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides best practices for mapping business roles to SAP Fiori, including goal setting, task breakdown, and designing for different task types.","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/joule-assistant/joule-icon","title":"Joule Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule Assistant / Joule Icon","lastModified":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Joule icon activates the conversational AI assistant and is also used for SAP marketing purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/ai-and-joule-design/joule-assistant/media_17860a9104529f9cdc154fdedcef4ab91212b2119.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/best-practices-for-designing-sap-fiori-apps","title":"Best Practices for Designing SAP Fiori Apps","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Best Practices for Designing SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about the best practices for designing SAP Fiori Apps","intro-desc":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only/media_1b27db6dd4b6c0eec3b05bd02699ba8e86b44bd1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop","title":"drag-and-drop","version":"","breadcrumbs":"","lastModified":1777297540,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777297537,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction","title":"Interaction","version":"","breadcrumbs":"","lastModified":1782340219,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777297537,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1777297536,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"SAP Fiori Launchpad – Merged Header","version":"","breadcrumbs":"","lastModified":1782340302,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1777297537,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1777297537,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to manage and trim leading white spaces when copying and pasting text into input controls to prevent processing issues.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/media_1c3891164147b26d35d90c36cd06324f775f90cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1782340151,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers international date formatting rules and how to use SAPUI5 formatters based on user locale settings.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/states/interaction-foundations-component-states","title":"Component States","version":"","breadcrumbs":"Foundations / Interaction / States / Component States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The component state controls its interactivity and visibility, with only one state active at a time.","intro-desc":"The component state determines the interactivity and the visibility of the component. A component can have only one component state at any given time. The following component states are available: enabled, disabled, read-only, and hidden.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/states/media_151c2b93f016ec87072ac607b17230f6f99ea9285.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/states/interaction-foundations-focus-states","title":"Focus States","version":"","breadcrumbs":"Foundations / Interaction / States / Focus States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Focus states determine which component receives input when no positioning is provided, primarily aiding keyboard users.","intro-desc":"Focus states determine which component receives the user’s input when the input doesn’t supply positioning information. The focus state is most important for keyboard users. The following focus states are available: focused and unfocused.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/states/media_1d3d4e285d3d03675d5ff5bfc0f5317b07c3f9bd8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782340302,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"","lastModified":1777297538,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Forwarding items is now handled by a Forward action in the Share menu of the header toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Object Handling – Partial Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Partial Edit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Object handling interaction flow is used to edit specific sections or items of an object.","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_151176540ca66a2118dae22b47e68ef45b94f4f55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1782340151,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about international number formatting rules and when to use SAPUI5 number formatters based on user locale settings.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/delete-objects","title":"Object Handling – Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Objects can be deleted from a list or object page, with a confirmation dialog to prevent accidental deletion, unless specified otherwise.","intro-desc":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the items depends on the structure of the object (simple or complex).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_1420ac552e13b7b375167d6c0dc74f30370306117.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam integrates with SAP Fiori to enhance collaboration through tiles, menu options, and group feeds, connecting teams with key information in the cloud.","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Object Handling – Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about using the create with reference pattern for creating a new object and referencing it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_18613303bfe2a1150661fb1e7e7277403519fcba6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines rules for displaying units of measurement using long text instead of abbreviations, based on locale settings.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/media_1fe324e275df364181851d438a6e8b79bb00683a0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1782340148,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Object Handling (Create, Edit, Delete)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers actions for objects, including creating, editing, and deleting, with options to create from scratch, copy, or reference existing objects.","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Which Selection Control Should I Use?","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Which Selection Control Should I Use?","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Selection controls are UI elements that enable users to choose one or more options, with various types designed for specific use cases.","intro-desc":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support dedicated use cases. This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_1fbf5806ea6a90aa61abe81230bd18da77eedbf54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains international time formatting rules and how to use SAPUI5 time formatters based on user locale settings.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/media_108541462ce9e30919b7314c39a25f4645d7be76f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/messaging/processing-multiple-items","title":"Message Handling – Processing Multiple Items","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Processing Multiple Items","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline covers how to communicate the status of multiple item processing, including success, failure, and partial processing, with clear messages for users.","intro-desc":"When a user selects multiple items from a table, it might not be possible to process all of the items at once.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/messaging/media_1f814c060f04e00e414ce785987d3ef3a347b4c32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1777297538,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips provide additional information, appearing near the pointer for unlabeled elements, varying by browser and platform.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_1dd38bfc64a884844c90532d7384523cda110c084.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage busy states in SAP Fiori apps using local and global indicators to inform users during ongoing processes.","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_16f99fa6efcbe276c93111f8e44bafa685a0292cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses a hub-and-spoke navigation model, with a central home page and easy back navigation to provide seamless user flow across apps.","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/navigation/media_1e93ccccc2b283d2a243d359a6999c48eb4e66169.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"Efficiently display and interact with data using responsive and desktop-centric table controls for various complexities.","intro-desc":"A table contains a set of line items, each displayed as a row that’s divided into columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/tables/media_107217f2f7767be3a21c2af8878d32a1590596cbf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Complex Objects – Global Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Global Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the global flow for creating and editing items, where only the main page needs to be saved, unlike the local flow.","intro-desc":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_107badff44f210450a3174b27162b1185cbeb4ef7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1777297539,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the right UI element states helps users identify options and actions, including control, value, visual, and additional states.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_1380d05378bd5264023e6fc84e6076138ccf9a380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Object Handling – Mass Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Mass Edit","lastModified":1779461038,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing lets users simultaneously update multiple objects with shared editable properties.","intro-desc":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_186fa93495d3f4146973df58742e7efe8995daee0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1777297539,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1777564356,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to organize and place actions in SAP Fiori, ensuring they are easily accessible and clearly differentiated from navigation.","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-my-home","title":"SAP Fiori Launchpad “My Home”","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad “My Home”","lastModified":1779460801,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The \"My Home\" space in SAP Fiori launchpad provides a personalized entry point with role-based app tiles, allowing users to add, remove, and group apps on both mobile and desktop devices.","intro-desc":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_153f77eff06072cef783df71456d92d13520fa096.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization allows users to modify column visibility, order, sorting, grouping, and filtering for both simple and complex tables.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/tables/media_148972a96b93f46542626688003fc01290f86c781.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"","lastModified":1782340302,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772 and Sunset of the SAP Fiori Client.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/motion-design-overview","title":"Motion Design – Overview","version":"","breadcrumbs":"Foundations / Interaction / Motion Design","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design uses animation to enhance user interactions and experiences. It makes SAP software interfaces intuitive, user-friendly, and modern.","intro-desc":"Motion design uses animated visual elements to support interactions, communicate intent, and create a more engaging user experience. You can use it in SAP software to make interfaces feel intuitive, user-friendly, and modern.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_14d67ad623fe9273e629e26ac71361f0daeb4816e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/states","title":"states","version":"","breadcrumbs":"","lastModified":1777297540,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Simple Objects (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Simple Objects (Create, Edit)","lastModified":1779376072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about flows to create and edit simple objects, with all information on one page and standard message and draft handling.","intro-desc":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_1a1cc118fe7262666a86d6ce90117d257b1581cc7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/timing","title":"Timing","version":"","breadcrumbs":"Foundations / Timing","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Timing refers to how long it takes for a component to appear or disappear from the screen, as well as any intentional delay between user input and system response.","intro-desc":"Timing refers to how long a component appears or disappears on screen, as well as any intentional delay between user input and the system response. The speed should be slow enough for users to notice changes, but fast enough to avoid unnecessary waiting.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_160b1b3a19586472ca52b4b5d7581edaf71b2c1ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/reorder","title":"Drag and Drop – Reorder","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Reorder","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Reordering enables users to dynamically adjust the order of items by dragging an item and dropping it into a new position.","intro-desc":"Elements can be reordered by dragging them to a new position within a defined list or grid. Reordering changes the placement of elements relative to other items and requires a specific drop target to finalize the new order of the item set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/media_1dc19d32261b4e99023a1dc36cfc32afd87b41db2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data.","intro-desc":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_1319c700fcb1f6fa576a4cce3d7477035e3ec7544.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/keyboard-support","title":"Keyboard Support","version":"","breadcrumbs":"Foundations / Interaction / Keyboard Support","lastModified":1779893363,"designowner":"Core Design Web","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Overview of what is necessary to make a UI component accessible to keyboards.","intro-desc":"Every application and UI component must be fully operable using the keyboard.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_1f288821a6ad1a847ea132af6133ddb6f615beed7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1777297540,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Launchpad home page is the customizable entry point for accessing apps, with tiles and links for easy navigation on mobile and desktop.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_1f2981ddaf70261c89e9be9e125786fbbea0eac2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is a temporary version of a business entity that saves unsaved changes, prevents data loss, and allows editing resumption until saved as the active version.","intro-desc":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_14824efef9dca768e282b67d962819d953809c925.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1777297538,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Launchpad provides an enterprise search to quickly find apps and business objects like materials, customers, and maintenance plans.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_1c99516cb73d573ee3cd8b163bcfac119b8bf85a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/gestures","title":"Gestures","version":"","breadcrumbs":"Foundations / Interaction / Gestures","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Touch gestures are key for interacting with mobile and touch-enabled web environments, allowing navigation and manipulation via natural hand movements.","intro-desc":"Gestures are touch-based interactions that let users navigate, manipulate, and engage with digital interfaces using natural hand movements. They're essential in mobile and touch-enabled environments, where you don't have traditional input methods like a mouse or keyboard. Each gesture – like swipe, tap, double tap, long press, or rotate – conveys a specific intent and triggers context-aware responses from the interface.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_19edbf13926038e2b420deeefaf57eb8e8086a267.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777297537,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori Launchpad services include features like Recent Activities, App Finder, Settings, and more for enhanced user experience.","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_130348e70d783a65fed4991372085a7fd06ba1142.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1782340147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps can leverage native mobile features like camera, GPS, and accelerometer for ensuring consistency.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/designing-for-empty-states","title":"Empty States","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Empty States","lastModified":1777297538,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers empty states in apps, explaining their purpose, design recommendations, and how to enhance user experience with clear guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/media_19f4505aa19fac28906348de6d2119371f56c59e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/overview","title":"Interaction Design Foundations - Overview","version":"","breadcrumbs":"Foundations / Interaction / Interaction Design Foundations - Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interaction design foundations summarize all aspects of how the user interface should behave when interacting with it to accomplish a certain task and a corresponding goal.","intro-desc":"The interaction design foundations define how the user interface should behave when users interact with it to complete specific tasks and achieve their goals. Interaction occurs through input devices such as a mouse, keyboard, gestures, or voice commands, and output devices like screens or screen readers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_1da1f012a47734798bbe6df63618b4509f66b5d83.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782340302,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/data-transfer","title":"Drag and Drop – Data Transfer","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Data Transfer","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"<Short Description>","intro-desc":"The drag and drop interaction can occur between components within an application or across different applications. This means users can transfer data from a source component to a target component, which may involve transforming the data format or data uploading if the transfer is across applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/media_1f1bc0128b250dd4f12379fa465795df5661c14fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-spaces","title":"SAP Fiori Launchpad Spaces","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Spaces","lastModified":1777297540,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad spaces allow users to switch between spaces and the home page, organizing role-specific apps with tiles for quick access to relevant business tasks and content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_16f72ac0248bab2c56af202e3d0551b6e21b6d631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/ai-notice-base-concept","title":"AI Notice Base Concept","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / AI Notice Base Concept","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Outlines UX and UI design methods that ensure that users are aware when interacting with AI-generated or AI-edited information.","intro-desc":"This guideline outlines UX and UI design methods that ensure users are clearly aware when interacting with AI-generated or AI-edited information. In accordance with the SAP Global AI Ethics Policy, transparency is crucial for building trust in AI-enhanced products, and the AI notice concept plays a key role in achieving this transparency.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/media_15c7e662d18e9923836bbf46fbb66ae41f68298cd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/interaction-design-foundations-states","title":"States - Overview","version":"","breadcrumbs":"Foundations / Interaction / States - Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_12ec8ae5bfcdb32f5fee0a519fcadd19ed78276ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad hosts apps, offering navigation, personalization, and role-based access on mobile and desktop devices.","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/screen-reader","title":"Screen Reader","version":"","breadcrumbs":"Foundations / Interaction / Screen Reader","lastModified":1782340144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Overview of what is necessary to make a UI component accessible to screen readers.","intro-desc":"Every application and UI component should be designed to allow blind and visually impaired users to utilize screen reader announcements for all relevant content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services","title":"Integration and Services","version":"","breadcrumbs":"","lastModified":1782340219,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/cursors","title":"Cursors","version":"","breadcrumbs":"Foundations / Interaction / Cursors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cursors are graphical elements that show the current position within the software interface.","intro-desc":"Cursors are visual indicators that show where user interaction is currently focused on the screen. Users can move the cursor and interact with elements on the screen using a mouse, touchpad, or keyboard.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_19f56a748c4e9dfc1a149bce79f684326c2cdd247.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/move","title":"Drag and Drop – Move","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Move","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Drag and drop is an intuitive interaction for moving an element from one position to another.","intro-desc":"Drag and drop is an intuitive interaction for moving an element from one position to another. In some cases, the draggable element is used as a content container and its position then has no business significance. In other cases, the draggable element represents a business object or value, and moving it changes that value.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/media_1643c188053da9dca8b5fbd5814b1eeb11a8df851.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers SAP Fiori's data formatting rules for dates, time, numbers, and units to ensure consistency across different locales and seamless workflows.","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777297539,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/copy","title":"Object Handling – Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Copy","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_19c2b382122892c2af0945dd02aeb09a4cc5f41a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop-overview","title":"Drag and Drop – Overview","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Drag and Drop is an intuitive interaction, which allows users to reorder, resize, move or transfer elements by dragging them from one location and dropping them to another.","intro-desc":"Drag and drop is a simple and intuitive interaction that lets users to reorder, resize, and move elements or transfer data while getting real time visual feedback. It is used in many contexts, each with specific needs and requirements depending on the use case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_1d2914f3017fd3cb4c9c60e3f5074543c1c31e081.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling – Overview","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori message types and how to use them effectively in messaging scenarios.","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/messaging/media_139884682f4371430549515bb250c4886df56dc47.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/resize","title":"Drag and Drop – Resize","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Resize","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Resizing allows users to dynamically adjust the size of an element by dragging its edge and dropping it at the desired size.","intro-desc":"Elements, components, or containers can be resized in one or two dimensions – or both – depending on the interaction design. Unlike reordering, which requires a specific drop target, resizing is based on the final pointer position to determine the new size.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/drag-and-drop/media_16d6ef915cadb703869fbedd178d9d6833c7b141e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Complex Objects – Local Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Local Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the local flow for creating and editing items with standard and draft handling, where each subpage is saved separately.","intro-desc":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/global-patterns/object-handling/media_1c8c74db63ff7c7cbca5347151b48e2aadd70407e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1782340142,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1777297539,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder in SAP Fiori launchpad lets users browse and launch SAP Fiori, SAP GUI, and Web Dynpro ABAP apps from one place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/integration-and-services/sap-fiori-launchpad/media_13ba1291ffd940838846eceac47655f24ccc9df23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual","title":"Visual","version":"","breadcrumbs":"","lastModified":1782340219,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1777297562,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/typography","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297562,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1782340164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to create icons for web apps in a third-party marketplace.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1777297562,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1779893363,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates importance and association while providing direction to users.","intro-desc":"Color brings your screens to life. It communicates importance and association, letting users quickly identify key elements. When you use the theme’s color palette, you help create a clean, lightweight design that stays consistent and coherent across all SAP Fiori applications. Thoughtful use of color enhances visual hierarchy, usability, and accessibility. Colors also reinforce consistency and help users recognize status or visual feedback.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_177f1d34328b976c544a3e6b636ebd3d93917a9d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/states/interaction-foundations-selection-states","title":"Selection States","version":"","breadcrumbs":"Foundations / Interaction / States / Selection States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The selection state highlights the selected element, making it clearly distinguishable from others.","intro-desc":"The selection state is applied after the user has selected the element. The selected element should be clearly distinguishable from the other elements. The following selection states variants are available: selected, unselected, and indeterminate.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/states/media_1606cb341590fa042ec735a5ede2b8918f86ecf3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/states/interaction-foundations-interaction-states","title":"Interaction States","version":"","breadcrumbs":"Foundations / Interaction / States / Interaction States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Interaction states are managed by the component, with only one state active at a time.","intro-desc":"Interaction states are handled by the corresponding component directly. A component can have only one interaction state at any given time. The following interaction states are available: regular, hover, and down.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/states/media_19ec9031e8b6107af8f81b01305610f9e33712950.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/wrapping-and-truncation","title":"Wrapping and Truncation","version":"","breadcrumbs":"Foundations / Interaction / Wrapping and Truncation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn best practices for text wrapping and truncation, ensuring consistent behavior across devices and controls.","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls use wrapping to show full text or truncation to save space, depending on how important the information is and how much room is available.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_1b675c276d37e41908525b4ca9a525e582e413f6b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/shadow-concept","title":"Shadow Concept","version":"","breadcrumbs":"Foundations / Visual / Shadow Concept","lastModified":1779893363,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Shadow levels indicate the visual layering hierarchy of container controls in the UI.","intro-desc":"The shadow concept offers a standard way to show depth in applications. It defines several depth levels that apply to all container components, such as tiles, menus, dialogs, and other elements. Each depth level uses a unique shadow, so you can easily distinguish one layer from another. This helps create a consistent visual hierarchy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_14dbb64f65f6354761925c467e140d6f04bec2714.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/interaction-foundations-value-states","title":"Value States","version":"","breadcrumbs":"Foundations / Interaction / States / Value States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value ...","intro-desc":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/media_10e851a8c8f40f08eebacbf1c12e300572e4cecee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori adjusts content density for optimal component sizes, supporting both touch and mouse or keyboard interactions on any device.","intro-desc":"SAP Fiori is responsive and works on all devices and form factors. You need to support all common interaction styles in the same way. This includes interaction with a mouse and keyboard as well as touch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_181991c8bd8f95f41457f4f175f559c5b8c3f9bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/ux-illustrations","title":"UX Illustrations","version":"","breadcrumbs":"Foundations / Visual / UX Illustrations","lastModified":1779893363,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"UX illustrations enhance understanding, make complex ideas relatable, and add personality to create an emotional connection with users.","intro-desc":"UX illustrations simplify complex information, enhance comprehension, and boost engagement through visual storytelling in user interfaces. Thoughtful use of illustrations supports a human-centered experience, making interactions feel approachable, relatable, and meaningful.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_1cc1ee328b1daa942b7556ee6a8df7bd3433e8125.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations - Overview","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations - Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section offers consistent use of design elements like colors, typography, and icons ensures strong branding, following guidelines on design tokens, and theming.","intro-desc":"Visual design plays a key role in how users perceive and recognize a product. Applying consistent styles reinforces brand identity and helps users feel confident as they interact with your application. Explore the sections below to get an overview of each visual design area and find links to detailed guidance:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_15dc136939bdb3eb73c26f981180d7a1a4b3c9d35.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/colors/morning-horizon","title":"Morning Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Morning Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. ...","intro-desc":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/colors/media_1a3f13591278075c4a8d5b2dcddd2db222eb28b65.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/colors/evening-horizon","title":"Evening Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Evening Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/colors/media_1b96154f01f35e4caeba1e1066a19f50f52baa5ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-for-notifications","title":"UX Writing for Notifications","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing for Notifications","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Guidelines for writing consistent notification texts.","intro-desc":"Notifications are system-generated messages that notify users about significant changes in workflows, processes, or data. They inform without interrupting work, and acting on them is optional.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_195a416f837f5d751ecd5dd1ede8dacc7736e4055.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/typography/typography","title":"Typography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s proprietary 72 typeface is designed for legibility, robust hierarchy, brand voice, language support, and accessibility in SAP Fiori applications.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1782340167,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/colors/quartz-dark-colors","title":"Quartz Dark Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Dark Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Dark is a dark theme for SAP Fiori applications, designed for low-light environments, ensuring a clean and consistent user interface.","intro-desc":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/colors/media_14502ab4f6d1a3687f67f65a2395e4672020106de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/iconography/iconography-horizon","title":"Iconography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Horizon","lastModified":1778423258,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons for the Horizon themes feature a bold, consistent design with easy-to-understand metaphors, optimized for scalable use in SAP applications.","intro-desc":"The SAP icons for the Horizon visual themes feature a fresh, friendly, and bold aesthetic. They are designed for consistency in size, stroke, and balance. As a core element of the SAP visual product identity, these icons are optimized for simple and direct user interaction through intuitive, easy-to-understand metaphors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/iconography/media_183d1c951c22262f154c9be5f72dc95924ca8414e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/typography/typography-horizon","title":"Typography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Horizon","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s proprietary 72 typeface is designed for legibility, robust hierarchy, brand voice, language support, and accessibility in SAP Fiori applications.","intro-desc":"SAP applications use SAP’s proprietary typeface 72, with a fallback to sans-serif system fonts if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/states/interaction-foundations-state-combinations","title":"State Combinations","version":"","breadcrumbs":"Foundations / Interaction / States / State Combinations","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Some of the states like selection state, value state, and interaction state can be used together.","intro-desc":"Some of the states can be used together with other states.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/states/media_15cb5e98246a386793f8b76da8bac986a3a3f31c3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording","title":"Writing and Wording","version":"","breadcrumbs":"Foundations / Writing and Wording","lastModified":1782340162,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"","lastModified":1777297562,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been revised and moved to the Interaction Foundations section of the guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1778062261,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/theming","title":"Theming","version":"","breadcrumbs":"Foundations / Visual / Theming","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The latest SAP theme, Morning Horizon, is complemented by alternative themes like Evening Horizon, Quartz Light, Quartz Dark, and high-contrast accessibility options.","intro-desc":"The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also Quartz Light, Quartz Dark and the accessibility themes High-Contrast Black (HCB) and High-Contrast White (HCW).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_1a45413ea46ccff86dd6b5add932ebb90eca1d89a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/iconography/service-icons","title":"Service Icons","version":"","breadcrumbs":"Foundations / Visual / Iconography / Service Icons","lastModified":1777297561,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Service icons ensure consistent, inclusive metaphors for SAP Fiori applications, aligning with native app icon design for third-party marketplaces.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/iconography/media_1e03f65455d1928106fd98f9c9c00e827845a82e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is an alternative SAP Fiori theme that uses a clean, lightweight color palette for a consistent and coherent user interface design.","intro-desc":"Quartz Light is an alternative theme for SAP Fiori applications. Color communicates importance and association and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is an additional visual theme for SAP Fiori, offering a color palette that enhances user direction and association.","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/iconography/icons","title":"Iconography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons feature a friendly, elegant design with consistent size and balance, optimized for simple, scalable user interaction.","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/iconography/media_11d9d449f052b4f87fbbb2871ec6f63b4a6e3e76c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/interaction/states/interaction-foundations-value-states","title":"Value States","version":"","breadcrumbs":"Foundations / Interaction / States / Value States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value ...","intro-desc":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/interaction/states/media_16d2d5a627af8f1914830df888979ec0f220c5057.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/iconography/product-launch-icons","title":"Product Launch Icons","version":"","breadcrumbs":"Foundations / Visual / Iconography / Product Launch Icons","lastModified":1777297561,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Product launch icons help communicate the purpose of the SAP Business Suite experience, enabling users to instantly identify products on the suite’s home page and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/iconography/media_10952068250c81adf878514e83076aee6115ca995.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/visual/design-tokens","title":"Design Tokens","version":"","breadcrumbs":"Foundations / Visual / Design Tokens","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and ...","intro-desc":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and are linked directly to the SAP base theming content implementation that is used for all products to adopt the SAP standard and accessibility themes across all SAP technologies and platforms. Using design tokens instead of hard-coded values can streamline the work of building, maintaining, and scaling products with a design system.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/visual/media_19f44ec8c49dbcb36970036ed3b9aae7d422ed116.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans","title":"Floorplans","version":"","breadcrumbs":"","lastModified":1782340220,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types","title":"Page Types","version":"","breadcrumbs":"","lastModified":1782340220,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1779384642,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"This article explains how list reports allow users to view, filter, and act on large sets of items, often serving as a gateway to item details.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1782340309,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode. The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme","title":"WalkMe","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe","lastModified":1782340158,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out our evolving content design resources for WalkMe content creators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/walkme-intro","title":"About the WalkMe Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / WalkMe","lastModified":1782340157,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This Content Design Toolkit is intended for WalkMe content creators (Content Designers, Builders, UAs).","intro-desc":"This Content Design Toolkit is intended for WalkMe content creators (Content Designers, Builders, User Assistance Developers).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for text wrapping and truncation, ensuring consistent behavior across devices and controls.","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/web-assistant","title":"SAP Companion","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / SAP Companion","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Companion offers context-sensitive help and guided tours in SAP Fiori apps, enhancing the user experience with in-app assistance.","intro-desc":"SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on top of the current application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/media_13bfab4ae6bcc6c39aefca7e82ba6f84cb5a034df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/analytical-list-page","title":"Analytical List Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page Floorplan","lastModified":1782340211,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The Analytical List Page (ALP) provides seamless data analysis, visualization, and actionable insights in one view, enabling users to explore, identify patterns, and take action on transactional content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/walkme-boilerplate","title":"WalkMe Boilerplate Text and Examples","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Boilerplate Text and Examples","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section includes step balloons for tasks/UI elements that are consistent across many SAP products.","intro-desc":"This section includes step balloons for tasks/UI elements that are consistent across many SAP products. We’ve collected examples here that you can use/copy “as-is” or tweak slightly for your specific circumstances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/media_1998ec4e75b159c15d42d46d0ed565bbb083c7fc7.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines guidelines for overview page texts, including titles, subtitles, and actions.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ai-ui-text","title":"AI UI Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / AI UI Text","lastModified":1778489405,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI UI text serves as the primary means of communication between users and AI systems. It plays a crucial role in conveying information, instructions, errors, ...","intro-desc":"AI UI text serves as the primary means of communication between users and AI systems. It plays a crucial role in conveying information, instructions, errors, and feedback – ensuring that users can understand and effectively interact with the AI functionality.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_169c77503af531ab3b4d9b89d48f4a691cf47572a.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1782340215,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator helps identify translation space needs and potential truncation issues in SAP Fiori apps, based on extensive translation data.","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/walkme-content-guidelines","title":"Content Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Content Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section provides WalkMe content guidelines.","intro-desc":"This section provides WalkMe content guidelines. Most of these guidelines align with SAP Fiori UI text design patterns and most User Assistance (UA) Style Guides. However, a few rules differ to better align with the tone and learning experience we want to provide within WalkMe experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/media_120a9d38dcbb17911349ae052a58d7fac5f6bb438.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/walkme-toolkit-guidelines","title":"Toolkit Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Toolkit Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.","intro-desc":"This section provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/walkme/media_1ead77ffbe996bb533dd3a5fa0738aa22ca603e7f.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/situation-handling-framework-ui-text-guidelines","title":"Situation Handling Framework – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Situation Handling Framework – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline offers formulation patterns and best practices for creating text in Situation Handling, applicable to both standard and extended frameworks.","intro-desc":"This guideline applies to the texts that you can define for Situation Handling. The guidelines apply to the standard framework and the extended framework. The goal of this guideline is to provide you with formulation patterns and best practices to support you when creating text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_1ceba85e2a0519b5016378ad08e04e98de45fc1fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/analytical-list-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777297584,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To explore the design capabilities of SAP Fiori elements for OData V4 and experiment with their behavior, see Analytical List Report in the SAP Fiori ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/analytical-list-page/media_1bce9986520016e88c27baa7a42d785b45086b71a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779089002,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For more information, see the topics for the list report header and content area in the SAP Fiori Elements section.","intro-desc":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_1549c39ca8f620954aec85464c960f4de7b633ee8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ui-text-guidelines-for-sap-fiori","title":"UI Text Guidelines for SAP Fiori Apps","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Guidelines for SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","intro-desc":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_18fcfcbc6be57e98137ab8258b2d3a9eb90b8a202.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/object-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297586,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the object page overview, header, content ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/object-page/media_15f578a0c33aa6dda2b04ee87e20811a0a2c98a57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1782340158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts","title":"Page Layouts","version":"","breadcrumbs":"","lastModified":1779960492,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page","title":"Overview Page (OVP) Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) Floorplan","lastModified":1782340161,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app that organizes task-specific cards, allowing users to efficiently view, filter, and act on information based on their role.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297602,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782340159,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297602,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782340158,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"This article explains worklists, which help users manage and process items, offering variants like simple lists, tabbed lists, and KPI-tagged lists for different needs.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297602,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1782340159,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The overview page enables immediate action through integrated card types (stack card, object stream, and quick view card) that allow users to interact without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1777297602,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1782340160,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout allows users to personalize card position and size, adapting content to fit business needs and available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1782340159,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards display items in a table format using the responsive SAPUI5 control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1782340302,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297602,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/dynamic-page-web-component","title":"Dynamic Page Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782340161,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"A layout component, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1782340159,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"List cards display items or links in various formats, including list, bar chart, and link types, with options for icons and images.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297602,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1782340160,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The fixed card layout offers predefined card sizes in responsive, collapsible columns for a compact and focused overview page display.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782340158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1782340159,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Custom cards offer flexible design and content options for overview pages, allowing for features beyond standard cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297603,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782340161,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page in SAP Fiori offers a flexible layout with a collapsible header and optional footer toolbar, supporting various floor plans and use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1777297602,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777297601,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To explore the design capabilities of SAP Fiori elements for OData V4 and experiment with their behavior, see Overview Page in the SAP Fiori Development ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page/media_10987990b7b041e44a914b702aa39e51da4b32342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297603,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see Worklist in the SAP Fiori Elements section.","intro-desc":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/work-list/media_1da586d19728bbc318a095878202d146cb1bf1aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782340160,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Cards","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Cards","lastModified":1782340159,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards on the overview page organize key app content, offering a focused, non-editable view of relevant data from multiple sources in various formats.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1782340158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297603,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/initial-page-floorplan/media_1c24b9881a2fb6ef7a56e348a9954eadb038b73b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/media_19fb37ced7333a42274b1bc8915cbfed7a046975a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/when-to-use-which-floorplan","title":"When to Use Which Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / When to Use Which Floorplan","lastModified":1777297603,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article explains SAP Fiori floorplans, which are designed for different tasks like providing overviews, listing objects, managing objects, or focusing on a single object.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/media_1038cab413a616913e9b43568a3e103b9fe31d937.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/dynamic-page-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is a generic layout control designed to support various floorplans and use cases.","intro-desc":"The dynamic page is a generic layout control designed to support various floorplans and use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/dynamic-page-web-component/media_1286bdfe0ab57adc42b3e48331bc4f453c508343f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782340167,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout lets users view and edit multiple objects on one page, with each object displayed in a separate tab.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries","title":"Libraries","version":"","breadcrumbs":"","lastModified":1779960219,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782340167,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"Letterboxing in SAP Fiori restricts the UI width to 1280px, ensuring consistent aspect ratios, with optional use for adapting to larger screens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/page-header","title":"Page Header","version":"","breadcrumbs":"Page Types / Page Layouts / Page Header","lastModified":1782340161,"designowner":"Core Design Web","uielementstechnology":"","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"A well-designed page header enhances navigation, sets UX tone, and adapts flexibly to varied app scenarios.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1782340161,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1782340302,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1782340168,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control enables responsive layouts with customizable columns and rows for optimal display on both desktop and mobile devices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/ai-skills/sap-design-system","title":"AI Skill for SAP Design System (internal)","version":"","breadcrumbs":"Resources / AI Skill for SAP Design System","lastModified":1779959607,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Bring the SAP Fiori for Web design guidelines directly into your favorite AI tools.","intro-desc":"We're bringing the SAP Design System into your favorite AI tools. This new skill brings our web design guidelines directly into Claude Code, GitHub Copilot, Cursor, and Cline, so developers get smarter suggestions and faster workflows.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/ai-skills/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-column-layout-web-component","title":"Flexible Column Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782340161,"designowner":"Cloud ERP","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782340168,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout enables seamless navigation across multiple floorplans on a single page with resizable columns and various layout options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1782340302,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/page-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The page is a container component for a full application screen comprising a header, content area, and footer.","intro-desc":"The page is a container component for a full application screen comprising a header, content area, and footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/page-web-component/media_1428b3579991178bdf89b7030feff3a9afed9db4d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system optimizes padding between elements in SAP Fiori interfaces using responsive padding and margin classes.","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-column-layout-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a pattern for displaying multiple floorplans on a single page. The flexible column layout is not restricted to a specific ...","intro-desc":"The flexible column layout is a pattern for displaying multiple floorplans on a single page. The flexible column layout is not restricted to a specific floorplan, as long as it is responsive down to phone size.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-column-layout-web-component/media_17e10ffe3c01247fac68fb9814973c016c1c26c7a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/ui-kit-overview","title":"UI Kits - Overview","version":"","breadcrumbs":"Resources / UI Kits / UI Kits - Overview","lastModified":1782340168,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP UI kit ecosystem provides a modular foundation for creating consistent, scalable user experiences across SAP products. At its core, it enables product teams ...","intro-desc":"The SAP UI kit ecosystem provides a modular foundation for creating consistent, scalable user experiences across SAP products. At its core, it enables product teams to build and extend their own design kits while maintaining visual and functional coherence across applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/page-web-component","title":"Page","version":"","breadcrumbs":"Page Types / Page Layouts / Page","lastModified":1782340161,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/joule-web-ui-kit","title":"Joule Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / Joule Web UI Kit","lastModified":1777297620,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article details the SAP Joule Web UI Kit, which includes design foundations, core components, UX patterns, and content, accessible in Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1910616f73010fb485ee3edb920fbb48cd365c3fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/letter-boxing/media_1b9793eb36bcd37dcb7e0f6f6875f012c4604a06c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/floorplan-overview","title":"Page Layouts and Floorplans","version":"","breadcrumbs":"Page Types / Page Layouts and Floorplans","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of how SAP Fiori layouts and floor plans are used to build application pages.","intro-desc":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/media_1c4d78afccc080f19471585c3c3a457cddaaef55e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/sap-fiori-for-web-ui-kit","title":"SAP Fiori for Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP Fiori for Web UI Kit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and ...","intro-desc":"The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and development processes and encourages consistency.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_14caac037c8d76ae5beeec55581a5305675042024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"external_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/ai-skills","title":"AI Skills","version":"","breadcrumbs":"","lastModified":1778597122,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources","title":"Resources","version":"","breadcrumbs":"","lastModified":1782340220,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/semantic-page","title":"Semantic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Semantic Page Layout","lastModified":1782340161,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is a predefined layout for freestyle apps, enhancing the dynamic page with predefined header and footer elements, aligning with SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page. Beforehand, the user selects the objects from another page, usually ...","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.\nBeforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.\nAs a result, the user can work on several objects simultaneously and switch between them easily.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/design-stencils-for-figma","title":"SAP S/4HANA Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP S/4HANA Web UI Kit","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP S/4HANA Web UI Kit for Figma helps designers quickly prototype SAP Fiori for Web applications using the Morning Horizon theme, with elements for conceptual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1300dea86199038d609d7b3b08d3af2714fe96d26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/user-research/user-research-method-cards","title":"User Research Method Cards","version":"","breadcrumbs":"","lastModified":1777297621,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user research method cards are now part of a new user research resource page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/user-research/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined ...","intro-desc":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/semantic-page/media_128a69021abefd20cd335eeb71738fafed96eaae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/downloads","title":"Download Fonts","version":"","breadcrumbs":"Resources / Libraries / Download Fonts","lastModified":1778420668,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the links below to download the following SAP fonts:","intro-desc":"You can use the links below to download the following SAP fonts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/sap-ai-web-ui-kit","title":"SAP AI Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP AI Web UI Kit","lastModified":1782340169,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the SAP AI Web UI Kit for Figma to speed up the design and development of AI features for your product. It’s ...","intro-desc":"You can use the SAP AI Web UI Kit for Figma to speed up the design and development of AI features for your product. It’s been designed to help you create responsible, accessible, and human-centered AI experiences with ease.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-grid/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also ...","intro-desc":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-grid/media_1aa1ad1f3fccb9dbb40debc7533de84f2611f4835.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/user-research","title":"User Research","version":"","breadcrumbs":"","lastModified":1782340229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/design-stencils-for-sketch","title":"Design Stencils for Sketch","version":"","breadcrumbs":"","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/page-header/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The page header is a crucial component of any application interface, serving as the first point of interaction for users. A well-designed header not only ...","intro-desc":"The page header is a crucial component of any application interface, serving as the first point of interaction for users. A well-designed header not only enhances navigation but also sets the tone for the entire user experience. This guideline is based on the dynamic page header, which offers a flexible structure and interaction capabilities to support a variety of application scenarios.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/page-header/media_117bf762c8db67f89939906a4ca4e209b10f3502e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/sap-web-ui-kit","title":"SAP Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP Web UI Kit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit in Figma provides commonly used components like buttons and inputs, which can be used standalone or as a connected library for product-specific extensions.","intro-desc":"The SAP Web UI Kit in Figma contains the components used most commonly across SAP products, such as buttons and inputs. It can be used standalone, although many product teams use it as a connected library that can be cascaded to their own product-specific extensions. This means that they do not have to duplicate the commonly used components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_15c271d8b305f3e6888cc247ed4743ccde3253e32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/ux-illustration-creation-kit","title":"UX Illustration Creation Kit","version":"","breadcrumbs":"Resources / UI Kits / UX Illustration Creation Kit","lastModified":1779461561,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UX Illustration Creation Kit helps lines of business create custom illustrations using a library of predefined assets.","intro-desc":"The UX Illustration Creation Kit helps lines of business (LoBs) create custom illustrations. Instead of requesting illustrations, you can use the kit to build what you need.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_10e5e58df7ff4b6d199b3e48ddcb18c0ad0d33342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/ai-ui-starter-kit","title":"AI UI Starter Kit","version":"","breadcrumbs":"","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This UI kit was replaced by the SAP AI Web UI Kit.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/user-research/conducting-user-research","title":"User Research (internal)","version":"","breadcrumbs":"Resources / User Research / Conducting User Research","lastModified":1780034426,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"User research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors.","intro-desc":"User research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/user-research/media_113f9978e8998f1769a9e1e741286ae03b0baed62.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can freely resize the columns, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/page-types/page-layouts/flexible-column-layout/media_1be0116a17f6906d6b170b0f48ddd63da33da9aac.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/design-stencils-for-axure-rp","title":"Design Stencils for Axure RP","version":"","breadcrumbs":"","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/user-research/user-research-resources","title":"User Research Resources (external)","version":"","breadcrumbs":"Resources / User Research / User Research Resources","lastModified":1780034512,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"At SAP, user research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors. It is a crucial phase ...","intro-desc":"At SAP, user research is an important aspect of product development. It helps identify user pain points, preferences, and behaviors. It is a crucial phase in creating a product that is user-friendly and meets the needs of the end user.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/user-research/media_113f9978e8998f1769a9e1e741286ae03b0baed62.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"external_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/design-stencils-for-adobe-xd-2","title":"Design Stencils for Adobe XD","version":"","breadcrumbs":"","lastModified":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/user-research/how-to-present-your-sap-fiori-app","title":"Showcase SAP Fiori Apps in Device Frames","version":"","breadcrumbs":"Resources / User Research / Showcase SAP Fiori Apps in Device Frames","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article provides a guide on creating visually appealing images of your SAP Fiori app, including device frame stencils and best practices for composition and keyboard use.","intro-desc":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/user-research/media_1404359f37fcc643bcd23e295ca90721d58fd9542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1782340303,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"An analytical table, also known as an ALV or ULV, contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.In contrast to other tables, the analytical data binding used by the analytical table allows an aggregated number to be shown automatically in a cell. This means that a number in such a summarized cell is a total sum of several lines in the database.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_18b73cb1e28bec04145d94f0ddbe4e63c36cfea90.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-button","title":"AI Button","version":"","breadcrumbs":"UI Elements / AI Button","lastModified":1777297639,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"AI buttons allow users to trigger AI-powered actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13f678ec89b54c773a9f26003000d08ac4a6bf640.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-writing-assistant","title":"AI Writing Assistant","version":"","breadcrumbs":"UI Elements / AI Writing Assistant","lastModified":1777297639,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Assists users in creating, iterating, and improving text entries.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c5af394677fcd53972e9e16b951d980f4dbf1783.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-acknowledgment","title":"AI Acknowledgment","version":"","breadcrumbs":"UI Elements / AI Acknowledgment","lastModified":1777297639,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Informs users about the opportunities, risks, and limitations of an AI service.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_176cee28492673485e3f40e0650e889b96d30ce5b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/user-research-overview","title":"User Research Overview","version":"","breadcrumbs":"Resources / User Research","lastModified":1782340216,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the user research resources available to support your design-led development journey.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements","title":"UI Elements","version":"","breadcrumbs":"","lastModified":1782340207,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-acknowledgment/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297639,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI acknowledgment message box on new SAP CX AI toolkit capabilities","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/ai-acknowledgment/media_176cee28492673485e3f40e0650e889b96d30ce5b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297639,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI button is made up of the following elements to enable AI-powered functions:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/ai-button/media_13f678ec89b54c773a9f26003000d08ac4a6bf640.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-writing-assistant/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article discusses the usage of the AI writing assistant.","intro-desc":"This article discusses the usage of the AI writing assistant.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/ai-writing-assistant/media_1a133702a4ff992e0f00dec1e8164eaeffd414a1d.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/analytical-table-alv/media_19f2517bb7bb602acd379d50d65c8b4f22d3c2b84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777297660,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons enable users to trigger actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_16842c4c5b7fb018d89020b97595860dce12d0b4b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-group","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1777297659,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays a number of avatars, which act as a digital representation of a user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19a2aaa99a40e4b4faac2a3d47d76ea3b864f575f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1778160673,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a component for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1dbae460739853c52030a278271e1f936690e7ab1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-group-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297660,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/avatar-group-web-component/media_1fe63deac4ec22a90fa9acf174e18a5bf4bdd812a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-web-component","title":"Avatar (Web Component)","version":"","breadcrumbs":"","lastModified":1782340170,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Avatar component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/cards","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1777297660,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b3785aabcb190e8947ea3c176a7a4e9bff73e548.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-group-web-component","title":"Avatar Group (Web Component)","version":"","breadcrumbs":"","lastModified":1782340171,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Avatar Group component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297660,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/avatar-web-component/media_159081a52050ba53a101c7e33dcd5628729bbb3c9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-web-component/style","title":"Accessing The component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297660,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-group-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297660,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual ...","intro-desc":"Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual styles to reflect purpose, priority, and intent. Button behavior and appearance can change depending on user interaction, layout context, or the type of task.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/button/media_15e9fdbfaf05ed46509bd13c7665f9c674afb053e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar-group/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar group is a visual element that displays several avatars together, indicating that more than one person or business entity is associated with an ...","intro-desc":"The avatar group is a visual element that displays several avatars together, indicating that more than one person or business entity is associated with an item. It’s typically used to represent a group of people who belong together – for example, members of a project team or department.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/avatar-group/media_164b1f7fe5427d46468b7bd79c5500ae022dd133a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779778830,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Avatars are visual representations of users, products, or business entities, helping people quickly identify them within an application. Users can be shown with their own ...","intro-desc":"Avatars are visual representations of users, products, or business entities, helping people quickly identify them within an application. Users can be shown with their own photos or initials, while products can be depicted with representative images or logos.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/avatar/media_1e6fe5715bb11a8601431411546cd1eb3a52283eb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-picker-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297676,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/date-picker-web-component/media_16b87a31ef407a02454da54ff29e6ca5c73a84056.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-time-picker-web-component","title":"Date/Time Picker (Web Component)","version":"","breadcrumbs":"","lastModified":1782340169,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Date/Time Picker component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297676,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1777297675,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox lets the user set a binary value (such as “true/false”).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_14c7903a0117bd2fee9d8c5b94949d41b9381d8b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1777297676,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_180d6045951fc4ad7bd20ae646dc035544bee1a4a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-time-picker-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297676,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/date-time-picker-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-picker-web-component","title":"Date Picker","version":"","breadcrumbs":"","lastModified":1782340304,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.145.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-time-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297676,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1777297675,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19f2bca5fd4c82fd2feb80a5158512dcab8982037.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a ...","intro-desc":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/cards/media_12cff613555f634035aef58b44089d164475cab72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets users make a yes or no choice or turn a setting on or off. The checked state means the option is on ...","intro-desc":"A checkbox lets users make a yes or no choice or turn a setting on or off. The checked state means the option is on or selected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/checkbox/media_12d611bf9595c410f8fd554460012e83598fb7831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker is a UI component that lets users select both date and time values within a unified input field. It combines a calendar ...","intro-desc":"The date/time picker is a UI component that lets users select both date and time values within a unified input field. It combines a calendar view with time selection, supporting both compact and cozy display modes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/datetime-picker/media_1aad48cb12a73298b5dff10de1ca0b3436a14cb9e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker is a UI component used to select a single date using touch, mouse, or keyboard input. It supports manual entry in the ...","intro-desc":"The date picker is a UI component used to select a single date using touch, mouse, or keyboard input. It supports manual entry in the input field and calendar-based selection via the date picker button.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/date-picker/media_1265ebd5114adc1fca492c73ba8582437228be98b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1782340304,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is optimized for handling large numbers of rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_14af2ba20c348efcf7a2da4640d1f43e76e286856.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1777297695,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b94ff8523a28259079e446fee8b17687562c175f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/file-uploader","title":"File Uploader","version":"","breadcrumbs":"UI Elements / File Uploader","lastModified":1777297695,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The file uploader allows users to select single or multiple files and upload to a specific location.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_109ae63dea7d10a3e0dfd7964597e2e5f4012ec73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1777297695,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ea56d2e9bb720ba135015de98dbda62c1550383a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/file-uploader/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The file uploader lets users select one or more files using their local file explorer and upload them to the application. Uploading starts automatically as ...","intro-desc":"The file uploader lets users select one or more files using their local file explorer and upload them to the application. Uploading starts automatically as soon as users select the files.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/file-uploader/media_1077a8917461f9eed54517d2ca6f62bf3234054b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and ...","intro-desc":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and the overview page, and is also available as an alternative layout to the visual filter bar in the analytical list page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/filter-bar/media_11c6902d5d90de4e39bff6479df53fb9e66de70ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is optimized for handling large numbers of rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/grid-table/media_1e209d643e6fa81eb0619cd4955bac893f66d1f68.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the ...","intro-desc":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/grid-list/media_1b454ce5b965ffd3cacbcca0cf7f7a9a4e50a737d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/home-page-banner","title":"Home Page Banner","version":"","breadcrumbs":"UI Elements / Home Page Banner","lastModified":1777297713,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Harmonized banner for SAP product home pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1d4771c5433018e6c4e66aca688f362ae01f61388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/input-field","title":"Input","version":"","breadcrumbs":"UI Elements / Input","lastModified":1777297714,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1dbb9058a46440aa1fdf3332a2280754f738b8d10.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/guided-prompts","title":"Guided Prompts","version":"","breadcrumbs":"UI Elements / Guided Prompts","lastModified":1777297713,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Guide users in instructing the generative Al model.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_150354488b8cab79c7b0a06d5b66d201094fca61e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1777297714,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_175d3e5c9322b26b1fcdde65b6ce73fb05132a9e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/home-page-banner/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The home page banner is a standard card used in the hero space of the product home page. It can accommodate different elements, depending on ...","intro-desc":"The home page banner is a standard card used in the hero space of the product home page. It can accommodate different elements, depending on the needs of each product. The banner creates a consistent experience across SAP Business Suite home pages while still allowing for flexibility at the product level.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/home-page-banner/media_180ae49aaffec151aeef7983c0efac9661ab86112.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar is a navigation and filtering control that contains a set of tabs, each of which can display an icon, text, or ...","intro-desc":"The icon tab bar is a navigation and filtering control that contains a set of tabs, each of which can display an icon, text, or both and link to a different content area or view.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/icontabbar/media_1994d178fa4940bc374053fa217c28d650dcb7db6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/guided-prompts/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Guided prompts provide structured input fields and controls that help users instruct the generative AI model on the desired output without having to write descriptive ...","intro-desc":"Guided prompts provide structured input fields and controls that help users instruct the generative AI model on the desired output without having to write descriptive [external_only]custom prompts[/external_only][internal_only]custom prompts[/internal_only]. Guided prompts are useful when users want to specify attributes, styles, or criteria for the generated content, such as length or language.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/guided-prompts/media_1c6a941720ead4c23eb57fc04b79798a674cb9f94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The input component lets users enter or edit single-line text or numeric values. You can enable autocomplete suggestions and value help to make data entry ...","intro-desc":"The input component lets users enter or edit single-line text or numeric values. You can enable autocomplete suggestions and value help to make data entry faster and more accurate.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/input-field/media_10ae881c67e670e17fe7c8244df9928f5f21ed07a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782340304,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages or sections of an application.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10d93447f54d3b633fbf80c98e5f3922f4a1b0d2f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/input-web-component","title":"Input","version":"","breadcrumbs":"","lastModified":1782340304,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.142.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1777297728,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_116727355369bb5e81890b17c73ee2adb7f6ff5b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1777297728,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a component that is used as an information bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1a682f1190281d6b952b6687f328fc4007bff26fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/p13n-dialog-popup","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1777297729,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19cbd5d381c117e5ad1479bdf7626722b56e7e298.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-strip-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297728,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/message-strip-web-component/media_1db866de4477797c3877ee9d857ac5621de27e63f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/link-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297728,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/link-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/link-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297728,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-strip-web-component","title":"Message Strip (Web Component)","version":"","breadcrumbs":"","lastModified":1782340177,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the message strip component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-strip-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297728,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/link-web-component","title":"Link (Web Component)","version":"","breadcrumbs":"","lastModified":1782340172,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A link (also known as a hyperlink) is an interactive text element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/input-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297727,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/local-ai-notice","title":"Local AI Notice","version":"","breadcrumbs":"UI Elements / Local AI Notice","lastModified":1777297728,"designowner":"AI Design System","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Ensures users are informed when content is AI-generated.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_111cf81704a857f48ef261ae80001547152c15859.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/input-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297727,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/input-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779294127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications serve as real-time alerts, providing users with information about significant events, updates, or changes in business processes, workflows, or data. Notifications ensure users remain ...","intro-desc":"Notifications serve as real-time alerts, providing users with information about significant events, updates, or changes in business processes, workflows, or data. Notifications ensure users remain informed and can take timely action or make decisions without disrupting ongoing tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/notification-center/media_12b2ca0735ece3cf5ccf3e4c73403f7d576f63bc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip component displays application-related messages directly within the interface. It draws attention to important information, such as warnings or status changes, that might ...","intro-desc":"The message strip component displays application-related messages directly within the interface. It draws attention to important information, such as warnings or status changes, that might otherwise go unnoticed. The message strip component can be embedded within the header or detail area of an object or page, or it might apply only to a single component (for example, a table).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/message-strip/media_1673a9b7d793cc55e717af9a8ec2bdf49c4e9e01e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/local-ai-notice/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297728,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local AI notice pattern ensures users are informed when content is AI-generated, encouraging them to verify its accuracy prior to use.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/local-ai-notice/media_1b383f537482fb0306fe2afa1dfa8d7ee7a40478b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/p13n-dialog-popup/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/p13n-dialog-popup/media_151c7773aec722459550cdf5e511017c2c3bfe25e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages ...","intro-desc":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages or sections of an application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/link/media_1e6da0bfa1119ae44e8ec46832b3605b7dee8de60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/range-slider-web-component","title":"Range Slider (Web Component)","version":"","breadcrumbs":"","lastModified":1782340175,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A range slider enables the user to select a value range within a given numeric interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/range-slider-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297745,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/range-slider-web-component/media_18ef848600ce1435d0e1ab6af9bb2305d8107daba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/popover-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297744,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/popover-web-component/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/range-slider-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297745,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297745,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1777297744,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A range slider is a user interface component that enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_17f8eda2cfe03e9022456ad449c1a949d7927cc17.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-popover-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297745,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/responsive-popover-web-component/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/quick-prompts","title":"Quick Prompts","version":"","breadcrumbs":"UI Elements / Quick Prompts","lastModified":1777297744,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"Prompts that are integrated into workflows for easy access.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12ec83170d74cda11e01c5d6fcb7875b53e65b331.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-popover-web-component","title":"Responsive Popover","version":"","breadcrumbs":"UI Elements / Responsive Popover","lastModified":1782340178,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive popover displays as a popover on desktop and tablet devices but as a dialog on phones.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/regenerate","title":"Regenerate","version":"","breadcrumbs":"UI Elements / Regenerate","lastModified":1777297745,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"Allows users to iterate and refine AI-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_142b6c0aa2e601155814d0a92e4d7f535c44c81d8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1777297744,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The popover displays additional information for an object in a compact way and without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1db7db3b57da7418df2fbca3694e71410b49eb96d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/popover-web-component","title":"Popover (Web Component)","version":"","breadcrumbs":"","lastModified":1782340182,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A popover is a small overlay window that appears on top of the existing content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1777297745,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table contains a set of line items and is fully responsive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ec5bf5802ea135f739db35c25ecf3e66bb073903.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297744,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/quick-prompts/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297744,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In generative AI, prompts are essential for guiding the AI's output. Clear and effective instructions ensure that the output aligns with the user’s needs.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/quick-prompts/media_12fad6d326285ab52d279656de345cd01164cbcce.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover is a small overlay window that appears on top of an existing UI element. It displays additional information for an object in a ...","intro-desc":"The popover is a small overlay window that appears on top of an existing UI element. It displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/popover/media_112a827781ac163a0df24e6cbc727b7d91c1c10b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/regenerate/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The regenerate pattern provides a general approach for using AI to create or modify content across different scenarios. It lets users generate alternative AI results ...","intro-desc":"The regenerate pattern provides a general approach for using AI to create or modify content across different scenarios. It lets users generate alternative AI results or update existing AI-generated content, such as text, images, or other digital items, with the help of AI. Users can also iteratively refine the results to better match their needs or preferences.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/regenerate/media_116bb96a54e4e5a371437b0f72388f96d5c9b0617.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a UI component that lets users select a value range within a predefined numeric or non-numeric interval.","intro-desc":"A range slider is a UI component that lets users select a value range within a predefined numeric or non-numeric interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/range-slider/media_1f4c743a8fc7292703da6b643d739cff7d659b177.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items ...","intro-desc":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/media_172bfc0c08f7bd5be17c5648984cce48c777a8808.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1782340304,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/segmented-button-web-component","title":"Segmented Button","version":"","breadcrumbs":"UI Elements / Segmented Button","lastModified":1782340178,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"","elementstatus":"","description":"A segmented button is a group of buttons that can be toggled.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/select-web-component/style","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297777,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/segmented-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297776,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1777297776,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1edcfbbb36602c322cb5ee00f83ce61968aec0b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/segmented-button-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297776,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/segmented-button-web-component/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/select-web-component","title":"Select (Web Component)","version":"","breadcrumbs":"UI Elements / Select","lastModified":1782340304,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select component lets users choose an item from a                     small, predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_155323df084726c2b74dabc1df64a578f298339e6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/shell-bar","title":"Shell Bar","version":"","breadcrumbs":"UI Elements / Shell Bar","lastModified":1777297777,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The shell bar is a universal header at the top of all screens, providing product-specific and global functions like search, notifications, and user profile.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ce0eb21f30699ce18873094c6f3647883973fdea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/shell-search","title":"Shell Search","version":"","breadcrumbs":"UI Elements / Shell Search","lastModified":1777297777,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The shell search in the shell bar helps users quickly find relevant information or resources.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_182a2aeec10140836e2839459d4c83e6ba084b0d1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The shell bar is a universal header at the top of all screens. It offers both global functions (like search, notifications, and user profile) and ...","intro-desc":"The shell bar is a universal header at the top of all screens. It offers both global functions (like search, notifications, and user profile) and elements that are specific to the product context.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/shell-bar/media_1f820aaa3bcdadd326c30762b28677ed461f44482.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/select-web-component/usage","title":"Columns","version":"","breadcrumbs":"","lastModified":1777297777,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select component doesn't offer multiple types. Only the items in the dropdown list can have different types. You can also combine different dropdown list ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/select-web-component/media_1ac20082010df9e1f9d76c049ba02623e684a5c28.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select component, sometimes called a dropdown, lets users pick an item from a small, predefined list.","intro-desc":"The select component, sometimes called a dropdown, lets users pick an item from a small, predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/select/media_18fcac61b4ef2a3c48520e0b25e73402663d43539.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/shell-search/usage","title":"Info (information, internal_only)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This component is relevant for the UX Consistency Product Standard UXC-025 – Shell Search.","intro-desc":"The shell search in the shell bar helps users quickly find information and resources across your product or product suite. It provides a unified experience with results from all connected systems, enabling users to locate objects from a single entry point.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/shell-search/media_117bcb087669b9b42acbf862d6ab5d04c89cf5f30.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/side-navigation","title":"Side Navigation","version":"","breadcrumbs":"UI Elements / Side Navigation","lastModified":1777297791,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The side navigation component provides a vertical menu that allows users to access different sections or pages of an application. It can be opened via the hamburger menu in the shell bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_18d0c1bab1faf5a7c714f5d38d01e402ced5e90fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-filter-bar-annotations/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297791,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar control is now maintained but no longer enhanced so no further versions of the guidelines will be published.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/smart-filter-bar-annotations/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/slider-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297791,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/slider-web-component/media_1b8526a38b83649408a8fd1aacce78e989e4baa33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/slider-web-component","title":"Slider (Web Component)","version":"","breadcrumbs":"","lastModified":1782340181,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A slider enables the user to adjust a single value within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1777297792,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_158e7864d606e746af5bb2b9c06de5c45a035487a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"","lastModified":1782340307,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.145.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1777297791,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10f18fcdf5ab0c02427915434cdd7da325e1e9291.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/switch-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297792,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/switch-web-component/media_1afbf8e4c0e92fd70fa4252d017543166ca4600e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toggle-button","title":"Toggle Button","version":"","breadcrumbs":"UI Elements / Toggle Button","lastModified":1777297792,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1589cc9d29497316b15ced3b114a94c6c9a7e098d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/switch-web-component","title":"Switch","version":"","breadcrumbs":"","lastModified":1782340177,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The switch mimics a physical switch. It allows users to toggle individual features on or off.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/switch-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297792,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1777297791,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a component that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_18610d3e6b2649bc92240c40bf39fb6813cd6d739.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/slider-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297791,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The switch is a UI component used to toggle a setting on or off with a button. It lets users turn individual features on or ...","intro-desc":"The switch is a UI component used to toggle a setting on or off with a button. It lets users turn individual features on or off to adjust display settings or personalize the application’s appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/switch/media_1e8fd779eb8193c7debbb192fcd4e24c6e9e00ef0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/side-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The side navigation component provides a vertical menu that lets users open applications or modules in your product. It can be implemented as an embedded ...","intro-desc":"The side navigation component provides a vertical menu that lets users open applications or modules in your product. It can be implemented as an embedded panel or as an overlay. In embedded mode, the navigation can be expanded or collapsed using the side navigation button. In overlay mode, the button opens the navigation as an overlay.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/side-navigation/media_1d7f6c64a9f87fc6da7d7982a867437f1e5f8c22f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toggle-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toggle button is a UI component that switches between two states: active and inactive.","intro-desc":"The toggle button is a UI component that switches between two states: active and inactive.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/toggle-button/media_1c88a96f3d55e9e22272d4523d43029f21e8f0e16.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The slider lets users select a value within a predefined numeric or non-numeric interval by dragging a handle along a track.","intro-desc":"The slider lets users select a value within a predefined numeric or non-numeric interval by dragging a handle along a track.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/slider/media_1f601a55be91b62963251f0deb97ca3d7e2cf6caf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table. Use it for key actions that affect the entire table and for actions that apply to selected ...","intro-desc":"The table toolbar always appears above the table. Use it for key actions that affect the entire table and for actions that apply to selected items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/table-bar/media_18aa5b32c6e742756e67977ceab9317d1f3774ebe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/segmented-button","title":"Segmented Button","version":"","breadcrumbs":"UI Elements / Segmented Button","lastModified":1777297763,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A segmented button is a group of buttons that can be toggled.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1edd704fd080b48dbb11e1f35d0207e92cba1f12b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782340306,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/media_14e178a516a2d1718be8b1ad27b69e14ca2df7e4b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb ...","intro-desc":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/responsive-table/category-navigation/media_16ea748199d8c402123173db74045f3537b3b5388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/segmented-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A segmented button is a group of connected buttons that users can select. The group appears as a single component divided into multiple segments.","intro-desc":"A segmented button is a group of connected buttons that users can select. The group appears as a single component divided into multiple segments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/segmented-button/media_1a88004a6d5aae1cde06a0e34da2e4d0b82cbbd1f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/user-menu","title":"User Menu","version":"","breadcrumbs":"UI Elements / User Menu","lastModified":1777297805,"designowner":"Core Design CAX","uielementstechnology":"Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented by an avatar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1911a1133ae10544952e19f5a3513f623c7ab9baa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/action-list-item/media_1f192edd5b50c31f8c7a4a2fffe9904a0e1ffa061.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ba2cdfdae15188129f99960e884d84b8d3866067.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12944dfb4ac9ae58d254554cb58aa68896a191986.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1777297805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1a2776b92678b666305ec22ee6495187a29dcadfa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-text-highlight/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Based on user research insights and technical debt, we have de-prioritized development of the AI text highlight pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/ai-text-highlight/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toggle-button-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297804,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/toggle-button-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-notice","title":"AI Notice","version":"","breadcrumbs":"UI Elements / AI Notice","lastModified":1782340303,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.136.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/button-web-component","title":"Button (Web Component)","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777297805,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons allow users to trigger an action and come in a variety of shapes and colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c7555695ba57b75e6df4879e383c5ff94f41e493.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/breadcrumbs-web-component","title":"Breadcrumbs (Web Component)","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777297805,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb is a type of secondary navigation that indicates the position of a page in the application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19d997197376a272627ebd090a6e5714473b74b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778929655,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/area-micro-chart/media_1a44ce4bcf73d12bad4a4de3494429e6b0416e2b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/user-menu/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented ...","intro-desc":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented by an avatar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/user-menu/media_1b1dc22c598ac90f2522e60cb8f665aa4968c0e63.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bar is a container that can hold text, titles, buttons, and input elements.","intro-desc":"The bar is a container that can hold text, titles, buttons, and input elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/bar-web-component/media_195eaa0ad059716b2bc08d095fc47b63d839dc473.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit ...","intro-desc":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"The busy indicator informs the user about an ongoing operation.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/busy-indicator/media_1a63dbb512eb4de5785591c6c7d773261d5bc0e86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar-card/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected ...","intro-desc":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/calendar-card/media_1cf998dde09d9c7b19ba8439e201941eb05d3aae2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/upload-set-with-table-plugin","title":"Upload Set with Table Plugin","version":"","breadcrumbs":"UI Elements / Upload Set with Table Plugin","lastModified":1777297804,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Tables and Lists","elementstatus":"Available","description":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1aba95cc469fc709d8ec6a13d11ba9c2a4338ec53.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toggle-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297804,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toggle-button-web-component","title":"Toggle Button (Web Component)","version":"","breadcrumbs":"","lastModified":1782340178,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Avatar Group component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar-card","title":"Calendar Card","version":"","breadcrumbs":"UI Elements / Calendar Card","lastModified":1777297806,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1bbdcd191347ee54abec38aa31e1fba9534c28230.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/upload-set-with-table-plugin/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, ...","intro-desc":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, or phone) to an SAP Fiori app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/upload-set-with-table-plugin/media_1379fc67197900e632d5964ef3cb1ce582182e72a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/card-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or ...","intro-desc":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/card-web-component/media_174f7473dfd3d164352d5456678e4787ce65bda3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_162f7862c14ccd0084ae83c7f07a6b61f66146d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-prompt-input","title":"AI Prompt Input","version":"","breadcrumbs":"UI Elements / AI Prompt Input","lastModified":1777297805,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Target Design","description":"Enables users to submit custom AI prompts in natural language.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1f912b3f37982757c4967a3bd34743025fb66a64f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/barcode-scanning-mobile-integration","title":"Barcode Scanning","version":"","breadcrumbs":"UI Elements / Barcode Scanning","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12660ad81feb234819627cfb66e77bf30ea0159b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10bb2d35197a587e97589e42fcfbb53d803bf36b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, ...","intro-desc":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/calendar/media_1c23e81058fb75bc8c8c934d35251d08b2efbfa7f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778930151,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/action-sheet/media_1793e6be77583f4132b567990b06c63f05677c631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-prompt-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI prompt input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed ...","intro-desc":"The AI prompt input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed in natural language: custom prompts written by a user. In addition to text, it may also support other input options, such as images, voice, or various file formats.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/ai-prompt-input/media_1b2fe0981b422fbedaf5b607573bc6a8128e9166d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/breadcrumb/media_106c2c710fbf6f55fc4599675bd52c95e29cbc4aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777297805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12140d56a67df213284efad6144f66e287a977868.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/breadcrumbs-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set the separator style. The the following options are available:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/breadcrumbs-web-component/media_16001aad44c6e104ec8aebbe717b516617098db88.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777297805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_16ea7192a1f1bb7a1aefccde2c6154567c9904f38.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/card-web-component","title":"Card (Web Component)","version":"","breadcrumbs":"UI Elements / Card","lastModified":1777297806,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_196e031867ea1d948a13790c68d61e7a6f5e6fb91.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1777297806,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1401999354baa258a65fe5be091da14f46a30dc6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-text-highlight","title":"AI Text Highlight","version":"","breadcrumbs":"UI Elements / AI Text Highlight","lastModified":1782340303,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-notice/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI Notice guideline has been replaced by the Local AI Notice guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/ai-notice/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ef16012ea1f674d09e22c5cd9335ff2be9657bbd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-progress-indicator","title":"AI Progress Indicator","version":"","breadcrumbs":"UI Elements / AI Progress Indicator","lastModified":1777297805,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Provides information about the status of a user’s AI request.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_164dfba42f4417b2f2c81eb6fe1a741bf068eb43e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busy-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the space where the busy indicator is to be placed is limited, avoid using a busy icon text. For example, don’t show a text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/busy-indicator-web-component/media_1300c93feb04a7f178ee1ccf3da8dd49f5f3c2b07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/barcode-scanning-mobile-integration/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/barcode-scanning-mobile-integration/media_14cef05a5b3eeb84d3a1b7626a9f22a422dd3e54c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/ai-progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of ...","intro-desc":"AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of this pattern is to keep the user engaged and informed, manage their expectations, and show that the system is actively working.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/ai-progress-indicator/media_1027b816ced4a0f49b7a10e324d201c09f915865c.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1381c1ca2dcf879ab68ec6ce17f5405b744528d39.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1777297806,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_18a36a9719a86c303f1843323f35c6c8a443d9d85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1777297805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1fd50a6d5a303aee20c1b6b1c94d322edfec08d5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons let users trigger actions and come in various shapes and colors.","intro-desc":"Buttons let users trigger actions and come in various shapes and colors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/button-web-component/media_1d95dac4b50e81c8eb27e3ddd6a6963fce84e147f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1777297805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1cc5fec57ea0c43b8e7a71543f50a1af71fcea905.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778615283,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/bar-web-component","title":"Bar","version":"","breadcrumbs":"UI Elements / Bar","lastModified":1777297805,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The bar is a container that can hold text, titles, buttons, and input elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ca1db3ce6e0b18a473c5a08084e0ebb1ab5a51d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar-web-component","title":"Calendar (Web Component)","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1777297806,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar shows time-related data at a glance. It allows the user to select a single day, multiple days, or date ranges and to navigate through different months and years.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1d307d80994b71adf5d7744a87b4ddf37a5750fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1777297806,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1783b91b6a84a7d5d57c3e89031aea4a4afd0d846.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/carousel-web-component","title":"Carousel (Web Component)","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1777297806,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel allows users to browse through a set of items by swiping right or left.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_189ec55cc33a38db79298ec390fc7cb0a773d5be5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/busy-state/media_16e30becd2841a8bbdbde30b01be18525b9b85a84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To change the month, the user can either use the previous/next arrows or select a specific month in the month view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/calendar-web-component/media_1e8e1bcd48e77ffd326c95b700bc25deb8fb37702.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar","title":"Calendar","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1777297805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_138e7ca859952d8dc02250914913aef95008c79ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779176145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/carousel/media_1dc2820fc95aafa66306509643071ad960bfab90f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1777297806,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1bc01250da9e28c89f5dfae9b757509f5f45c1aa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busy-indicator-web-component","title":"Busy Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777297805,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_144e0e60e547a1eea3cd7ab091c4c723eeff13e8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1782340312,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.Optionally, a paging indicator displays the user’s current position inside the set of items.The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. In a comparison scenario, it can also be useful to display several items side by side. The carousel is not limited to displaying images; it can contain any sap.m control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_17f302169f29b6c6934b7fc891309ca7bbc3dd351.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/busydialog/media_13aa5ff9f7de0c020ee6a30a41f3be54ff221703b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the Previous and Next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/calendar-date-interval/media_1e7d0554823734fa58c69f38f3dada666ed438f7d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/calculation-builder/media_18aec04f8fc16c780b640f8a9488996bc891d0b85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/carousel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"1. Container: Holds the content, navigation buttons, and page indicator.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/carousel-web-component/media_1b6ba5c09ce59400edbded9b46613cd89b8738c7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1777297818,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_170e97efbb24e3d91c000971666bd2438e3218404.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297819,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color palette with 15 colors and just one recent color","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/color-palette/media_12ae77a64ad0711d80f1329dc66dfa8895f089415.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/cloud-file-browser","title":"Cloud File Browser","version":"","breadcrumbs":"UI Elements / Cloud File Browser","lastModified":1777297818,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"A tool for browsing through a remote repository, exporting data to the cloud, or importing files from the cloud to an SAP application.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_195c56544015c48b0afd7e7acb52ba10f34f03685.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/checkbox-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778769550,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/chart-toolbar/media_1d836296792fd447472804da0faa5f1369713c4da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/checkbox-web-component","title":"Checkbox (Web Component)","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1782340304,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, Select All), it can also display an indeterminate state to indicate that not all subitems have been checked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1989bcdd8ccfed4800b7f5e26baaf8e26bc5a2f72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297819,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/color-palette-web-component/media_108e91c2d13bbfcc04158b01cceeeef88afdd7851.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette-popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297819,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover opens when the user clicks on a triggering text link or button.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/color-palette-popover-web-component/media_10191cf92cd4e123db7d7f4454b308c1f3f227276.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297821,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/color-palette-popover/media_107f2bbe32647762877817cb0b250a23c3bd423e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1777297819,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13a32b33a122f287d7b9204d52bf397e892607e23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/checkbox-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox ...","intro-desc":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, Select All), it can also display an indeterminate state to indicate that not all subitems have been checked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/checkbox-web-component/media_1b474e3668604087733ed6b33665b1e6db9007cce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"The color picker allows users to choose any color and provides different input options for selecting colors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/color-picker-web-component/media_15ce7daea92f929a841e24660412a7cb0f9eb6319.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette-popover-web-component","title":"Color Palette Popover (Web Component)","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1782340304,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette                     and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-picker-web-component","title":"Color Picker (Web Component)","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1777297819,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b8387565e9db5f3a918e1bf2b37d3690f0eed203.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1777297819,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13c7fe1c6f602131dd3753778665612b1ca4f9f76.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779100841,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1777297819,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_11f6a274117b6d9dc755eae1e8a3e1446901d9fe2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette-popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297819,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297821,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/color-picker/media_1b078aaf0dc5403af74c988e35c55cb41c0a2cc5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297821,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/color-picker-popover/media_1a848c35dcc69fb71fb037a1ff2ab8d67c4815745.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1777297819,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1621603f391a48740d8bcdff89298faec6a0465a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-palette-web-component","title":"Color Palette (Web Component)","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1777297819,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette allows users to select a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b963258a5dc30a06a8d187913f277268297518ce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1777297819,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13a0d7279f03bd5e58608a4150ae7923e9f361b2f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/combo-box-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297819,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/combo-box-web-component","title":"Combobox","version":"","breadcrumbs":"UI Elements / Combobox","lastModified":1782340303,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combobox allows users to select an item from a                     predefined list.It provides an editable input field for filtering the                     list, and a dropdown menu with a list of the available                     options.If the entries are not validated by the application, users can also enter a custom value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1863898b42aa89dd33616aa2ed9ac4b6c978a4a63.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1777297819,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1f45a654433704f22b1cc3c4445bc1e32bcae6f0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/combo-box/media_18b457f9616bd67c2dac48ec1574a056eab37a024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-range-picker-web-component","title":"Date Range Picker","version":"","breadcrumbs":"UI Elements / Date Range Picker","lastModified":1777297819,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range in the calendar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_198d228240311fee0e933af5d03f2b91ab7c8d6ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779102382,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/comparison-pattern/media_1c240b529e72e2fa053c6626e59d9cc68e9fe8645.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/currency/media_1ece18af9c509f14a837e4d29611141968ce5e46a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297821,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combobox allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/combo-box-web-component/media_15f323bedbd4fb3b49e6069ba6d707385c047232e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1777297819,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_179347d1e10a682fa8d77033bf3cc739d84d70cba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1777297819,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_15b5940e9ccdc4a95fc6dbc49d98d7374265caa52.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1777297819,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ec2771196c09049434ea07c5df14aba290e42d07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1777297819,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1738feb6fb9c61d61d0f42e475828bb17c05bd22d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779096737,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/cloud-file-browser/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The cloud file browser is a tool that allows users to browse through a remote repository, export data to the cloud, or import files from ...","intro-desc":"The cloud file browser is a tool that allows users to browse through a remote repository, export data to the cloud, or import files from the cloud to an SAP application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/cloud-file-browser/media_1b9c11ee4930035a8cbadb7cf376e0ce5e19b827a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-range-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297821,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/date-range-picker-web-component/media_1f201b688c51f6104860ff9895b26d73cf2da5465.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/date-range-selection/media_1f39b5eb63b916e76a48ae549205ad4d3f28938f6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1777297821,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_182d470d9c04ad4c692fb3425fea174ec7121dadb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1777297835,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1030f9c1cc6ff4455afdf07bda192c4ec134f5a32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1777297835,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation for fields in SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_11bbe74d231d95aecc7507ca0cfc4f85c21001e3d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-side-content-web-component","title":"Dynamic Side Content (Web Component)","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1777297835,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1fcec572c6ad877326874f19607a45580445939f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_186ec1190b7154c9f5ddfccbd83b5845dccf4a15b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1777297835,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1a3fcf69b240cd88f53c23842a5864153296732d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-date-range-2","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date Range","lastModified":1777297835,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_103a45bb17117ede0c45aeb1d8ba9a2a98637653c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1782340306,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1777297836,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control interrupts the current app process to prompt the user for information or for a response.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ee2c8e5005dff65020d1ca8a4d53896a65ac71ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1156501eac156b9caa0cc89aad0a9b588748fd382.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/flag-and-favorite/media_165a342b5a1cd4e8caa1f2056ffea6b211160c6f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/formatted-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297836,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"By default, the control uses the standard font and headlines. It supports the following HTML tags:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/formatted-text/media_1ad302b9081d3eac381c9202963c8e33714f082fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information, such as key performance indicators (KPIs) or status details, offering additional context without requiring users to leave the ...","intro-desc":"The generic tag control displays complementary information, such as key performance indicators (KPIs) or status details, offering additional context without requiring users to leave the current page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/generic-tag/media_1440a090182e73adf56f02fa48ed627a89993fa9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-date-range-2/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/dynamic-date-range-2/media_129e4349aa26ec0008952dcdf3d21650e74e780f5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/export-to-spreadsheet/media_1304a2eca1d0416daeab79b76cfeff61031a58336.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-side-content-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. ...","intro-desc":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. The side content appears in a container next to or directly below the main content. The width or height of the main content area adapts accordingly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/dynamic-side-content-web-component/media_1fe415f4bc8c1e172587b5990270b79f26caed549.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a flexible layout container that enables the displays of additional contextual information alongside the main content. It adapts responsively to different ...","intro-desc":"Dynamic side content is a flexible layout container that enables the displays of additional contextual information alongside the main content. It adapts responsively to different screen sizes, automatically repositioning the side content on smaller devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/dynamic-side-content/media_153fbf7ccb2cdab975c8e44b27dce97f17f1549c1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/expandable-text","title":"Expandable Text","version":"","breadcrumbs":"UI Elements / Expandable Text","lastModified":1777297835,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The expandable text control provides access to truncated text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19da90aea5c0800469aca7446ff67a75c5b7a0546.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1777297835,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b61edc791937c0ae99febdf9d511948b426886e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1777297835,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The formatted text control displays HTML text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_175c8d1ac8959dcad08aed2fa30b24381ec485baf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1777297835,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1fae8da27aad67ed7955db99abd96bd9f35bb01ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dialog-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the ...","intro-desc":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the user for a response. While the dialog is open, the main screen is dimmed and blocked. A user action or confirmation is required to return to the main window.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/dialog-web-component/media_12283c89f3952026666f7cb671e0e1c9694cccfa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297836,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/display-list-item/media_133b9d5f6374df618a2c60b0e091d9fde05205715.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/form-web-component","title":"Form","version":"","breadcrumbs":"UI Elements / Form","lastModified":1777297835,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_195664e6fa3161129883a37f3373984f6896a9fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/feedinput/media_11b7a529fcc4ef4db57e1f2259811def5acfc7da4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/form-field-validation/media_1a60823b6e3a8d75aaaf96487420c63fce7955bf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1777297835,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1841027ebc68fc036150da6af1fa82b2788b3fc59.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/html","title":"HTML","version":"","breadcrumbs":"UI Elements / HTML","lastModified":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_14c456ab3deee644191c408e18add0ad1fa3ac000.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in ...","intro-desc":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/generic-mask-input/media_14388e3decc745639a06b5268156b5a1a162ed78e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778928966,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1777297836,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_114c632d3b0d722e02ed493f1eed765e4fe76988a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1777297837,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1bd45f01886edbff640b5961a41aad9e142fb5e64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dialog-web-component","title":"Dialog (Web Component)","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1777297836,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog component is a modal window that appears temporarily on top of the main screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1829e2306f4ef5a8f6c4cfd0877733e472dab4f05.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1777297837,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1fcd497fc61431596c51cf3e00e571b90c96ec9db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/illustrated-message-web-component","title":"Illustrated Message (Web Component)","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1777297836,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10c52bf91052b0bdf2cf1b308e60106cd1c9ce34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779102893,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/gantt-chart/media_182607306f0ec9c8750541a3ff9cd5c21c5bc4a94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into ...","intro-desc":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/image/media_16451af95fa2d40b83226fc5eb72c93be6114bf58.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/icon-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector ...","intro-desc":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector graphic. Icons can be purely decorative or used within interactive elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/icon-web-component/media_15f2cdd9e19a7723a5f438468581130b546cd16c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779102555,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are a powerful way to capture the user’s attention and to communicate your message.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c1947e8a30a55713f2de6da6fe9cdd85b1b4c457.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1777297835,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_114330825f5cacac149e43f26d9c8e3dfda4b9074.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/form/media_1d63a4170d01a5c0934425974c4c1e1e0075d3323.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_105f34094ca4e49d64a41b767a5312b77a0a4454e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/icon-web-component","title":"Icon","version":"","breadcrumbs":"UI Elements / Icon","lastModified":1777297836,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An icon is a symbol that is used to depict an item, action, or status.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_101ade000781b80020958a803fe0d07356407187d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label","lastModified":1777297837,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name assigned to a component or a group of related components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13ed5f048894e958511019a767a02838878ba396d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297838,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1777297836,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1f366d0285bdc5d68c436d9f31e9702d96dd2a954.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/footer-toolbar/media_12a3f22e888af82d7f02d0156be07146fe923ea87.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1777297836,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar always appears in the header of the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_14f56a0a4d67be0b2faa10138047632a1df3599a0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.Dialog) pauses the current app flow to collect a response or decision from the user. It requires explicit input – such as ...","intro-desc":"The dialog control (sap.m.Dialog) pauses the current app flow to collect a response or decision from the user. It requires explicit input – such as confirmation, cancellation, or data entry – before proceeding.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/dialog/media_1bfac893cc7d441a4bcf48049811930c6153ca430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/label-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297837,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Label: The default label comes without the optional “Required” indicator. The user can continue without providing input in the corresponding component or components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/label-web-component/media_1cfbcd62d868069e193cd0ed23c485b499ec665cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/invisible-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users ...","intro-desc":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/invisible-message/media_18eac0c5b4fddcdd03feeccd307d69481b64d77d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/illustrated-message-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297837,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An illustrated message includes a set of five UX illustrations per use case: large (L), medium (M), small (S), extra small (XS), and base. Each ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/illustrated-message-web-component/media_17910771d548c327d6bad6ec15492a9867f14c623.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/menu-button-web-component","title":"Menu Button","version":"","breadcrumbs":"UI Elements / Menu Button","lastModified":1779267281,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13b91d73d155d88c40a26edd0891c4afef71d0383.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1777297837,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b817e010750d4bb627cfae49c13209dc2fa37185.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1dd84db7bd2232638934317981c6d19e64a6bb1a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779104973,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/infobar/media_1ba75fd9c7d23b91ad5f00a6e5de73ed8dbcf1b28.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/header-toolbar/media_16211bc4d4ad8145a4c8bbb2e6676c81d00b3112a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/illustrated-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297837,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The illustrated message combines a solution-oriented message, an engaging illustration, and a conversational tone. It communicates specific use cases, like an empty state, more effectively ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/illustrated-message/media_1c278e871809df761fe9caaea7c5022cacf586c64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1777297837,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_147798bba89b3fe1e37430c72b21055f5bcbcf9d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1777297836,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_16e9417153a166a3be8bfd2a01e54b77741d165c1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1777297836,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1352664a5084983747b5609d3cda788f940c73ea5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297836,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/input-list-item/media_1eaaeaa0a5452a278606c9e19135caa52112785c7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/expandable-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The expandable text component lets users view longer pieces of content without taking up too much space in the layout. It shows a short preview ...","intro-desc":"The expandable text component lets users view longer pieces of content without taking up too much space in the layout. It shows a short preview of the text by default, with a Show More link to reveal the full content and a Show Less link to collapse it again. Depending on the design, the text can expand inline or open in a popover.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/expandable-text/media_1ae4d6b6bfff4bbb09015027a27bf9f24a3e54743.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1777297837,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_15482e6f32cb7f70d431fe6e413e60efa9e253b76.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1777297837,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_15d0a2711e410acb655b7ab56d12cd27621b4ee05.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1a477f1876ea7e5a8c26784ea518c4425da486fcc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/html/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise ...","intro-desc":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/html/media_19b84bf34545fee97d63137d2ec1147dc6fa299fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1777297835,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19b00a7268c49008465312bbdd7f022f276d1744e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/invisible-message","title":"Invisible Message","version":"","breadcrumbs":"UI Elements / Invisible Message","lastModified":1777297837,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_14a3c5c0bc8753912d2074dbfde1ad4dcbf2cd201.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/message-box/media_1b39c8ebfd2c67de27b26b91bdc4da871f745def0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/illustrated-message","title":"Illustrated Message","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1777297836,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10c52bf91052b0bdf2cf1b308e60106cd1c9ce34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/invisible-text/media_1bb653aeb0da45903951b29fa321db56586b9f21c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1777297837,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box is a special dialog for displaying different message types.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_182eb6d2097c8fdd6c8a9c97026b4e1ce2db9a87c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/menu-web-component","title":"Menu","version":"","breadcrumbs":"UI Elements / Menu","lastModified":1777297837,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A menu offers the user a list of alternative actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_103eced6af0f058e1487e66134701ce58cee3ddca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/list-web-component","title":"List (Web Component)","version":"","breadcrumbs":"UI Elements / List","lastModified":1777297837,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the list component to display different types of list item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_125cc6b829ac88a371e64cde7c087b0fb71963c5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A label is the name or title of a control or group of related controls.","intro-desc":"A label is the name or title of a control or group of related controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/label/media_12f37a1f0727c0a66a68e60accfa41338cb80493b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1777297837,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover control can display multiple messages of different types in one list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1849174013612670c0b8b16a03847af7dc2356b67.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/lightbox/media_1b90785d7cd883c0b78b64033924ec34fe0ac3166.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/menu-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297838,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visualization of the menu item adapts automatically, depending on which elements are included.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/menu-web-component/media_1a7657263f98d294c5fb1048cd30d3189d2f598e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1777297836,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_183eca8645eed2c9346dbebb0e4fbe8d8809a6aec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1777297837,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1251a3f18277cb1bb37937c6ddea9c9433196f917.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/form-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297838,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/form-web-component/media_1c45a296e899647574badbae920e0efaee31bdd23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/menu-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"The menu button offers a set of options for an action, displayed in a menu.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/menu-button-web-component/media_1c966c9452be8146755b335b0c6687624f8d190b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297838,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/message-popover/media_13fdba32a3548ad4a64980691267ecabacade7d6c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/list-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML ...","intro-desc":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML content. List items can also be grouped.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/list-web-component/media_1a204d9a8fca716d3fbc7d183780d2e75872b4fcf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779103563,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/radio-button-web-component","title":"Radio Button (Web Component)","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Radio buttons provide users with a set of mutually exclusive options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1212c79c9968d644ce5d9a6ab1218fe882b2bd57d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/progress-indicator-web-component","title":"Progress Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_17e6ba61edbf193ed04336491e337a5bada4ead16.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/placeholder-loading","title":"Placeholder Loading","version":"","breadcrumbs":"UI Elements / Placeholder Loading","lastModified":1777297853,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13ff7a7333591b85daf8ee2da6a139aa03869bad3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1777297853,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_17925cf8eeb172d5cbdcbac33f52abb13026865ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1777297853,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_148bbea2921a2dd5eb5077ecc04a31d9b19571a0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/panel-web-component","title":"Panel (Web Component)","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a responsive container for grouping and displaying information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_172b4b37fcba7f99a215c3dc44e8c7946f6ad05ee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1328f040cd295dab29537f328b03b7cc5ce6bd3bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1777297853,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1cfbb18f53b08a0e79b04761ee93283e7f4bf4aeb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1d0ddb97dab143a0fb0cc254e84062a11ff513418.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1777297853,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF viewer control displays PDF documents within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_18508a09693bcfba47b087c386f6a44fad7f1e6f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782340305,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is                     connected to an object and displays a certain type of                     information (status, identifier, number, marker).                     Object status: a short text that represents the semantic status of an object                     Object identifier: a short text that represents the key identifier of an object                     Object number: a short text that represents the numeric                     (key) attribute of an object and its unit                     Object marker: indicates the technical status of an object","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_18ce6628526fd1b32f6e1210ae065d3a1041925f4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/panel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you ...","intro-desc":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you can make the content area collapsible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/panel-web-component/media_11356a4925593d71f3b9b6bd6cfbba9467589b6ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297854,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/progress-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297854,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator lets you use a value state to convey semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/progress-indicator-web-component/media_1765ecfd6e380f478c39d36ef6716709c27f27098.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator shows how far a process has progressed or been completed. A horizontal bar filled with color represents the level of completion, and ...","intro-desc":"The progress indicator shows how far a process has progressed or been completed. A horizontal bar filled with color represents the level of completion, and the value is displayed on top of the bar as either an absolute number or a percentage.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/progress-indicator/media_1844020badd3e55dac7d6c2a244e259dd5cacb36e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","intro-desc":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/panel/media_1bdc7737232c3a7163f742ccee16854d7232335d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/pdf-viewer/media_1bfa25b86afee6191679c8e74904e96c327bba1db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1777297852,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10c2d58e75892d7e9223fb88abc14732a9453d8ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rating-indicator-web-component","title":"Rating Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777297854,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rating indicator can be used to rate content or to indicate a rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_16de02282256dc080f171841e7168771a3eb16302.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/placeholder-loading/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. ...","intro-desc":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/placeholder-loading/media_13175ff2e20060d41ef72d9cee92b3f257f4ad589.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/planning-calendar/media_1d029dd975301f7ba3629ef3938c58002575c9e7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/quickview/media_1c26630b4d844c4a3a3b964ac55788481a644a054.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-combo-box-web-component","title":"Multi Combobox","version":"","breadcrumbs":"UI Elements / Multi Combobox","lastModified":1782340307,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi combobox component enables users to select                     options from a predefined list or enter a custom text.It provides an editable input field to filter the list and a dropdown arrow to open the list of available                     options. The select options in the list have checkboxes                     that permit multiple selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_11d7c9a37954b54fe035b6055d89edbc7f42925c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Radio buttons provide users with a set of mutually exclusive options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12fd7df1828ad35aaa68bf92a08c68c5c19dd1dba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/rating-indicator/media_1724e262e70ee94a5a5df04e2596525fabbd01139.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/scroll-container/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","intro-desc":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/scroll-container/media_1685d43a2e70460d15841eee27d8a56c3ad9d4b3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1777297852,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can use the message view to display messages that are not related to form or table fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12a366b8ef7d44069b2048311d125007d6432e50e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and ...","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/smart-link/media_1fc9217782813e0c2c8c06bfd76d6a37237929542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1777297853,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12ad6602c273072dd5cdbb74dfeb21a9f50f77284.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-input-web-component","title":"Multi Input","version":"","breadcrumbs":"UI Elements / Multi Input","lastModified":1782340306,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi input allows the user to enter multiple values, which are displayed as tokens.To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ea3fc44de0baf8200706c9349d6c6f839c5567ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-combo-box-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297853,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1777297852,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_15d758db1c89b4953237f2f55a966d2f78040443b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297854,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The default steps can be replaced by other controls. The following controls are supported:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/micro-process-flow/media_16ad4ea12ff054ea17f03587aa63bf439f3633207.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297853,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi input allows the user to enter multiple values, which are displayed as tokens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/multi-input-web-component/media_180f153e02a3558b2a41ba9dee20f5d0f574ea9f6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297853,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item’s text sizes are limited due to truncation. The title wraps once and truncates after two lines. The key attribute also truncates ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/object-list-item/media_1f45470c7866e6bf8083da18bf1c214a3a08ea800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1843b1bab04ade10920de61d2103a186a3f2e0a19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/side-panel","title":"Side Panel","version":"","breadcrumbs":"UI Elements / Side Panel","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1e49a42204dc153ede9feca6a39032fa2996f9f20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1777297854,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A search is a means of accessing information quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1eed5318d4abc4417f7da320fd154933a3cabc32e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12e258a67c000175487319931f96b94a3e26c6c44.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/single-planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/single-planning-calendar/media_138330fed23841f66ba8e2a21aef216490a306641.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-form","title":"Smart Form","version":"","breadcrumbs":"UI Elements / Smart Form","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1d8bcedde2787a5b6485ad6c6b7e695b079bcc424.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows users to enter and manage multiple values displayed as tokens within a single input area.","intro-desc":"A multi-input field allows users to enter and manage multiple values displayed as tokens within a single input area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/multiinput/media_173f3d16993db12dabd14d2eec5a7b5aaf9d6e154.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1777297855,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c60bcc829ce26730d055d33f669332182894e007.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1779104643,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297854,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/object-display-elements/media_1d5e293aa90a85990cd3e79fbc23bdae9e037287e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1777297854,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor (RTE) is a complex control for data input and editing.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_155931ae82bd21814c697d788961052c6725983c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1a76a049d32baf29704965e3c476de5a7018f1a55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1777297854,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_15d03de686686ea38ad63b4fc4a0f38ce3d83ae7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779105481,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-list","title":"Smart List","version":"","breadcrumbs":"UI Elements / Smart List","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the smart list control to create lists or trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10c86fc4fb24df8abc6b8ae9e96bf01d40b75f3a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/scroll-container","title":"Scroll Container","version":"","breadcrumbs":"UI Elements / Scroll Container","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The scroll container is an empty area that can be filled with content, such as other UI elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1677cba63b54be6c3a43c17e4ba9898a47c5d5d81.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779105190,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297856,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/status-indicator/media_1204bd3d1e927fceef6f0f4c80ec470ebbd23a39d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1777297855,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1f59afd21ab46ecdfcf201b3ae090098a9e5e1145.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input component allows users to adjust numeric values in predefined increments (steps) using either buttons or direct input. It’s particularly useful when users ...","intro-desc":"The step input component allows users to adjust numeric values in predefined increments (steps) using either buttons or direct input. It’s particularly useful when users need to quickly change values like quantities or measurements without manually typing every number. The component supports both keyboard and mouse interactions, and it can be customized with minimum, maximum, and step values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/step-input/media_153cc2f7dae57cfad670c7c0a2715b6c39a3c1763.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rating-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/rating-indicator-web-component/media_140e678084c6e75ea2a1697020d05df22d86a805c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1782340305,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1e2db12d88fdcc1e7275a64d5a2f5594720e19b0f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/side-panel/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1781351967,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without ...","intro-desc":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page. It can easily be expanded and collapsed, depending on the user’s needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/side-panel/media_12ab0765a3bd29b6815fdf9a3d04cae3e71c07382.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes ...","intro-desc":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/smart-field/media_13982ddaf16d568b28f5fbf53dd98b2079035ecbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-input-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297853,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_11267a0a454f16fe9e5723e0e4620135e385b2fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297855,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/search/media_173c464bcffb8da1ceed059355bddeceb7346eae8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1777297855,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b649afd30de67e5b9d03f2368a7764aea00a7b7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/split-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions ...","intro-desc":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/split-button-web-component/media_1894b0af2e0e0f089961ebc124d8bf1f885a28453.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/select-dialog/media_151d474f12215db531d4813d312889e5dd488b289.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1e7f235e196376a51ab0a23cf7e4a063595f2d79e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1777297854,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Like the quick view, the smart link triggers a popover from a text link.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1f73ea6ce3a305e7f68b028062563fe520fc8844c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1777297855,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1663e65d59dfd02c24490da956914b4522dd554bf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-field","title":"Smart Field","version":"","breadcrumbs":"UI Elements / Smart Field","lastModified":1777297854,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c75b9c0b9c0391ea939818c29ce80bbe89d4d5f7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-form/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for ...","intro-desc":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/smart-form/media_148f43ae8402e44ccb124c8141019c1cb70ae4d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the smart list control to create lists or trees.","intro-desc":"You can use the smart list control to create lists or trees.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/smart-list/media_1b94ab65835677a74e9c0e573b679b916946adf82.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control ...","intro-desc":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/output-management/media_147f032d680639911c698dfb0a49783e2d38b6027.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297853,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi combobox component enables users to select options from a predefined list or enter a custom text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/multi-combo-box-web-component/media_1ab2ebb975588b55c0ae570df14b02881ca7339e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1777297853,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1b9fda93defa03fcc8c6a58f69ae8f741b6a385ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1777297853,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1308ff2e008d827dc3f9613229ccd4eae3089d227.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/process-flow/media_1b3b1b8be78eb186eac11e2b1d70bdf40ae708923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1777297853,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize the state of individual items in a linear workflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c530f345e6e900993a80d02969a54f9136c4eeec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1777297853,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item offers a quick overview of an object within a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19130d01c71644aa45c352045c67add76abc36139.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/radio-button/media_13f43fbead2716b11c1a0dd9432dfaf5d2b8d880f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1777297855,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1282a8ef01d40759c30fa1958f45188c487939ee6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to ...","intro-desc":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/message-view/media_1297823960caa449a4bd588d12ddce9a83d802ff8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box lets users select one or more options from a predefined list. It includes an editable input for filtering and a dropdown with ...","intro-desc":"The multi-combo box lets users select one or more options from a predefined list. It includes an editable input for filtering and a dropdown with checkboxes for multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/multi-combobox/media_13b0df4bef0d13335da8031790ed77147d534f643.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1777297855,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19a00fd65720aeef4af884eb7c87396f9db874966.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/step-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"The step input component allows the user to change the input value in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/step-input-web-component/media_10f2c203045f97335f4234b5b21a761b33466290e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/split-button-web-component","title":"Split Button","version":"","breadcrumbs":"UI Elements / Split Button","lastModified":1777297854,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1dd4c322684ec2b73b2a0e2d36dad4c40ddfe1d0a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/radio-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each option is represented by a radio button.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/radio-button-web-component/media_11caa85173e10d1c8a2d4f1838ed460ddea510eea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item is used in simple lists to display a single data point (title) or dataset, such as a product name with a ...","intro-desc":"The standard list item is used in simple lists to display a single data point (title) or dataset, such as a product name with a few attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/standard-list-item/media_1963eab28add4a5b354d4f2cd0f73a01277669909.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/message-toast/media_12b1d48b56e49a6eba9e17d00186b1def5051124b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1777297853,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The goal of the radial chart is to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_19624546162ab9e6a768a141d5a784da4da746a15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/rich-text-editor/media_1cf597db92b8fea0a2472ba77f283803cce6c2a27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. ...","intro-desc":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/smart-table/media_15a3d63fb7b794f9c62f68538c7cf4329b3c06339.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1777297870,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_114a6b3b3b51a554cbda796ac9090b3daff280b42.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/translation-of-textual-user-input","title":"Translatable User Input","version":"","breadcrumbs":"UI Elements / Translatable User Input","lastModified":1777297870,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_17414c3b4e763744cc278b944766d61e29eb3147e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10a808cf53bde211261c8c6463b34a9e3046cd93e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tab-bar-web-component","title":"Tab Bar","version":"","breadcrumbs":"UI Elements / Tab Bar","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1af41fd7083a8ceb5d740b8b3b42b0f95084d2c56.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ad23c3a5cbb074522c5c375e1c10be81fbd75ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1782340306,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_15b0422b7e582e1ddc7ce9908fbc1b3e41c7e8b79.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toolbar-web-component","title":"Toolbar","version":"","breadcrumbs":"UI Elements / Toolbar","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12998514bcca1c31bceb43a812ebcbba3d43a8b15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toolbar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"A toolbar is a flexible container that can hold various other components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/toolbar-web-component/media_15e3fbed46b86cc85fea60e1cfd906261a2b99cfd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/title/media_1150a96d93b5d339277efc23ab7a6e74867a9f0e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard tree item (ui5-tree-item) is the simplest type of tree item. It provides the most common features, such as text, icon, and a checkbox ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/tree-web-component/media_1e84246a9cefa11c380bf84b2449fe823993f4684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/token/media_14fbab56aa299c216ee66f06c2c3471ec8dc18d1c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toast-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297871,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/toast-web-component/media_172f6817aaa27ae3ea595e6302864c5122b62c5bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297871,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/translation-of-textual-user-input/media_19826614d2de03b2d74ad812c26c5b0af122e6fca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/upload-set/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297871,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set component has been replaced by the new upload set with table component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/upload-set/media_185115ae441ee05dbe93fce6239aa1c34088d95d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree-web-component","title":"Tree (Web Component)","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1777297871,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Trees provide a way to display and work with basic hierarchical data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ff9aabb633a5ec35d6e25203d30c8b4c35bae981.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/title-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297870,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1777297871,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1e4c5702f9e6851a9883582de19aa25283536350f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak ...","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/variant-management/media_16e7eb31b3d9c6b01aa2f8f3e07f13e4a7f492129.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree-toolbar","title":"Tree Toolbar","version":"","breadcrumbs":"UI Elements / Tree Toolbar","lastModified":1777297871,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The tree toolbar always appears above a tree or tree table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1302bccd8ab0bdfec92c883967bc0485805987389.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/variant-management","title":"Views (Variant Management)","version":"","breadcrumbs":"UI Elements / Views (Variant Management)","lastModified":1777297871,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_14e7e41f0812546a10deac89d05634542f274200c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1777297871,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1eb21be323538926dcef62f479733bea61f9ce2ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1777297871,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12284cb2338dfed809608068b2a99b22967e99d2e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/web-card-system-card-navigation","title":"Card Navigation in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Card Navigation in the Web Card System","lastModified":1782340196,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Target Design","description":"Outlines how to select the right card navigation pattern, based on card complexity and group consistency.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1777297871,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c4986b1d8a01b6f9f2e3a70e2b2bb5022b6e297c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media-in-web-card-system","title":"Media in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Media in the Web Card System","lastModified":1777297871,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"Using images on a card or banner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media_1e5dc29cbf2543dc15090c40a374f131dbd88b504.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779106356,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/treemap-chart/media_1f3805fe7c9043deea0280e4d12a19bd782cfc617.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1777297872,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_12e09112c19ba4784967fe7bb481697096d7b70af.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-web-component","title":"Table","version":"","breadcrumbs":"UI Elements / Table","lastModified":1777297870,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A table contains a set of data that is structured in rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1fb8fdebd5be14599939bdca8babae49a27f8ed21.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/toolbar-overview/media_10a55f77e8bf4167b477ce68e6a8ef7d2b29b2a8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media-in-web-card-system/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The media block feature enables cards to spotlight special content for the user. Media blocks are usually used in two ways:","intro-desc":"The media block feature enables cards to spotlight special content for the user. Media blocks are usually used in two ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media-in-web-card-system/media_1e672eb3ec52a5095b14b595060548fc7171dc234.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text-area-web-component","title":"Text Area (Web Component)","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1d364a69ecf7428981beed3951da5428973b51469.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1777297870,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_16fcc0b87006a0c1975d98b046fddb0b094ed7200.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/title-web-component","title":"Title (Web Component)","version":"","breadcrumbs":"UI Elements / Title","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title is a simple, large-sized text containing additional semantic information about the header level for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_10564776b4ef6e844b7cc839d5e9897081a7986c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_176417f4ec2d05547ee8c9a4ea667508b28edaad1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/visual-filter-bar/media_18aca500d03f7c65b77c3d319cb939cffd19390a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_129686b427d649f08260937a7966e1b6aaafbba89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/card-header","title":"Card Header in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Card Header in the Web Card System","lastModified":1782340306,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as the title, subtitle, and status of the card.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media_18d73d71c7de6fa8676e98cf8244e9f333e34188a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/toast-web-component","title":"Toast","version":"","breadcrumbs":"UI Elements / Toast","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A toast is a small, non-disruptive popup for a non-semantic success message that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_126afd6aea18f53541857d918e3b33e8d214c0243.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/table-personalization-dialog/media_1c7b4b60cb1988ecc718fe3a83fc476697cc1dbee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tag-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297870,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tag provides additional information about an object, such as a number or a KPI (Key Performance Indicator). It directs the user’s attention to specific ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/tag-web-component/media_1475fdf622d3b1064b36d82694496c72b7fd95166.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/tree/media_1c428ab6c8f9d62ace9804f3fc9ddddd74cff713d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that lets users enter multiple lines of text in a single field.","intro-desc":"The text area is an input control that lets users enter multiple lines of text in a single field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/text-area/media_133713cda04d6f67236b714ba0124b961f28ae445.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/table-select-dialog/media_1429c80d6a6fc0224079b28b3d48696966ec64bea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_16b27ce80f23ccd8053d8d77f08fe17e79f4a98c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1777297870,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_14ce0f38b209a709f302d9bdee6a74c581cc38210.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1777297870,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1e0b0a5091fbff4f273225dc595265ca715948290.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/wizard/media_1dbf1c997b206d1453cc9a04b32c515252d4439a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text-web-component/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the text component to display a given text.","intro-desc":"You can use the text component to display a given text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/text-web-component/media_161286b2e75853e8cb28af1007dc0ca94250b63b7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/time-picker-web-component","title":"Time Picker (Web Component)","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_121e56bea8e93d377b3c03d223241b2304a7f0c9f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text-web-component","title":"Text (Web Component)","version":"","breadcrumbs":"UI Elements / Text","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Component","elementstatus":"Available","description":"You can use the text component to display a given text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_187a5069fa7724cafd7ee160b19ffb50bada6e6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/table-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table contains a set of data that is structured in rows and columns.","intro-desc":"A table contains a set of data that is structured in rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/table-web-component/media_16aa7ce44bff38a270edb7dd91c79828f68b97401.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text-area-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"The text area is an input component that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/text-area-web-component/media_156f6803910810902246a6842ef5e51c5aff5c943.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/web-card-system-badge/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use badges to display important information about the card status, such as New, Updated, or :pushpin-off: (pinned).","intro-desc":"You can use badges to display important information about the card status, such as New, Updated, or :icon-pushpin-off(pinned).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/web-card-system-badge/media_1efa721b45464dcc9ce355f3da76358765321e1e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-date-range","title":"Dynamic Date","version":"","breadcrumbs":"","lastModified":1782340305,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.108.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"","lastModified":1782340198,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text control is used to display text within an application. It can appear in forms, tables, and content areas to present information. Its properties ...","intro-desc":"The text control is used to display text within an application. It can appear in forms, tables, and content areas to present information. Its properties include wrapping, truncation, and localization to ensure optimal display across devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/text/media_1b990fcb7d9cad7109c49b09952af9a0466f4cf23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tag-web-component","title":"Tag","version":"","breadcrumbs":"UI Elements / Tag","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A tag provides additional information about an object, such as a number or KPI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_17abbacb5227bda343fd2a47f5698792ec61ddb41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons ...","intro-desc":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/view-settings-dialog/media_18ac0065e367d3ffa15c71931aba77594965c8a3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/tree-table/media_12c2920fb57e11f0b4a2d61dda3a3659f389b340b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1782340195,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"","lastModified":1782340196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/menu-button/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The individual button guidelines have been consolidated in one button guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/menu-button/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/web-card-system-badge","title":"Badge in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Badge in the Web Card System","lastModified":1777297871,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Target Design","description":"You can use badges to display information about the card status, such as new, updated, or pinned.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media_17577c3126506c9d4255dafd83169c8a05da73766.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/upload-set","title":"Upload Set","version":"","breadcrumbs":"","lastModified":1782340194,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/p13n-dialog/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the new P13n Dialog page below for the most recent updates.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/p13n-dialog/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"","lastModified":1782340199,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tab-bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to ...","intro-desc":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/tab-bar-web-component/media_1c2cdf8b858b40dbdf35043a1cefb22346c1291d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/upload-collection/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection component has been replaced by the new upload set component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/upload-collection/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_149cfbba7d4c0c1b70b9ce962c576c8113ee7c05d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/web-card-system-card-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards typically serve as previews, offering users a glimpse of more detailed information and functionality. To facilitate navigation, users can interact with the card itself.","intro-desc":"Cards typically serve as previews, offering users a glimpse of more detailed information and functionality. To facilitate navigation, users can interact with the card itself.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/web-card-system-card-navigation/media_1f8643650913e34f14e48aa09be8c6a7abbd86889.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/card-header/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as ...","intro-desc":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as the title, subtitle, and status of the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/card-header/media_10cfa5421640afe1e7676179dc683fd2f36a5262a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/contextual-filter/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Filtering options are now covered by the filter bar and table toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/contextual-filter/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/time-picker-web-component/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/time-picker-web-component/media_1c2eb3f1954a95e27ea462a94757df40738214dff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system","title":"Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System","lastModified":1782340306,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most pertinent information or a teaser pointing to more details on a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ad6b4e026cdc404382cbb27505b8561ded4d054b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/dynamic-date-range/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There’s now a dedicated dynamic date range component with a new guideline page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/dynamic-date-range/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1777297870,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1ecebc4042f2d61a0559c9555c96d823509d2e0cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"","lastModified":1782340199,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1777297871,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_13f39637d12f06bde03f1956901baae0f5e3f9626.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1782340196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","intro-desc":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/tree-toolbar/media_12073c022978cfe0a3087cb53b94eefa5791f0283.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/tile/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/message-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297872,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message page component has been replaced by the illustrated message component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/message-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1782340305,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most ...","intro-desc":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most pertinent information or a teaser pointing to more details on a given topic or issue.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/web-card-system/media_105df4cee503fd76b26953bcd408f2b7051e0d522.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779106673,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","intro-desc":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/value-help-dialog/media_1fd34221a75309df9689cb0b23e9f9ca8a59fbd70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/timeline/media_1dcd077da9d47cc6a44b0bc14850766113aaff1fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker lets users select a localized time using touch, mouse, or keyboard input in 12-hour or 24-hour format. Users can either type a ...","intro-desc":"The time picker lets users select a localized time using touch, mouse, or keyboard input in 12-hour or 24-hour format. Users can either type a time directly or use the visual clock face to choose hours, minutes and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/time-picker/media_1a7734e5468a06b299b6918506c51fd43b1e21578.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/community","title":"Community","version":"","breadcrumbs":"","lastModified":1782340220,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/support","title":"Support","version":"","breadcrumbs":"","lastModified":1782340220,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/support/core-design-services","title":"Core Design Services","version":"","breadcrumbs":"Support / Core Design Services","lastModified":1782340198,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with the processes for requesting new features, handling support tickets, and asking for design advice.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/support/media_118f2112aec2fee7578b80cf6b18e5d716c969941.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777297874,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/community/newsletter","title":"Stay Up-To-Date","version":"","breadcrumbs":"Community / Stay Up-To-Date","lastModified":1782340198,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Keep abreast of the developments in the SAP Design System by subscribing to our newsletter and joining the update calls.","intro-desc":"Keep abreast of the developments in the SAP Design System by subscribing to our newsletter and joining the update calls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/support/core-design-services/innersource","title":"InnerSource for Web","version":"","breadcrumbs":"Support / Core Design Services / InnerSource for Web","lastModified":1777297874,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The InnerSource process for the SAP Design System ensures that all design teams can jointly evolve the design of our product portfolio. Supporting close-to market ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/support/core-design-services/media_1e5ed4a5ff225f8ff5b05c3bf22b6fbd16e900690.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/support/core-design-services/support-process","title":"Support Process Overview","version":"","breadcrumbs":"Support / Core Design Services / Support Process Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the graph below for more details of the steps we follow.","intro-desc":"Our support process covers three main areas:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/support/core-design-services/media_1c41fa26804982ec5c75062c873e70066d89b44f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/support/core-design-services/supported-components","title":"Supported Components","version":"","breadcrumbs":"Support / Core Design Services / Supported Components","lastModified":1782340198,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components ...","intro-desc":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components that we expect to be used broadly across all SAP products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/support/core-design-services/media_118f2112aec2fee7578b80cf6b18e5d716c969941.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1782340194,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/community/contact-us","title":"Ask the Community","version":"","breadcrumbs":"Community / Ask the Community","lastModified":1777297874,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/support/core-design-services/core-design-services","title":"Core Design Services – Overview","version":"","breadcrumbs":"Support / Core Design Services / Core Design Services – Overview","lastModified":1777297874,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article serves as a resource for SAP Fiori web design support, offering guidance on components, design foundations, and feature requests.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/support/core-design-services/media_11b19cd480dd12def8f9a27c053bae207078145b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1782338045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover","title":"discover","version":"","breadcrumbs":"","lastModified":1777298985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report","title":"list-report","version":"","breadcrumbs":"","lastModified":1777298985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120","title":"v1-120","version":"","breadcrumbs":"","lastModified":1777298985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1782338042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/community","title":"community","version":"","breadcrumbs":"","lastModified":1777298985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/community/newsletter","title":"Stay Up-To-Date","version":"","breadcrumbs":"Community / Stay Up-To-Date","lastModified":1782338077,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System News is sent out monthly and contains valuable information on the SAP design system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Intercultural UX – Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural UX – Environment","lastModified":1782338048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and ...","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1782338049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/product-standards/ux-consistency","title":"UX Consistency","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / UX Consistency","lastModified":1782338049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","intro-desc":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1782338048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and ...","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements","lastModified":1782338045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen ...","intro-desc":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen from scratch, you assemble an app from standardized pages that are automatically filled with your business data and actions. The result is a consistent, responsive, and accessible UX that follows SAP Fiori guidelines with far less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/list-report-content-area-fiori-elements","title":"List Report – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","intro-desc":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/smart-templates","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements","lastModified":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/media_173bb1ea449965ba698931a78c73ab276b000cc5b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1782338048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or ...","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page","title":"object-page","version":"","breadcrumbs":"","lastModified":1777298985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze ...","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/analytical-frameworks/media_13c0a32cf660ff94271312170ee2634f9f375c3b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/list-report-header-sap-fiori-elements","title":"List Report – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Header","lastModified":1782338097,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","intro-desc":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products","title":"sap-products","version":"","breadcrumbs":"","lastModified":1777298987,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/replacing-placeholder-text","title":"Replacing Placeholder Text","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Replacing Placeholder Text","lastModified":1782338045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for replacing the placeholder text","intro-desc":"Onscreen text and messages that are familiar to users in their business context simplify their work.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/object-page-overview-sap-fiori-elements","title":"Object Page – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Overview","lastModified":1782338043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1782338045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","intro-desc":"[external_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1782338047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, ...","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/analytical-list-page-overview-page-sap-fiori-elements-2","title":"Analytical List Page / Overview Page","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Analytical List Page / Overview Page","lastModified":1782338043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates. Consequently, you can find the information for all ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/object-page-footer-bar-sap-fiori-elements","title":"Object Page – Footer Bar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Footer Bar","lastModified":1782338044,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1782338047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784263169,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral ...","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only","title":"sap-s4hana-only","version":"","breadcrumbs":"","lastModified":1777298987,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent ...","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1782338046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists","title":"tables-and-lists","version":"","breadcrumbs":"","lastModified":1777298985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/integration-of-classic-sap-uis-sap-fiori-elements-list-report","title":"Integration of Classic SAP UIs (SAP Fiori Elements List Report)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Integration of Classic SAP UIs (SAP Fiori Elements List Report)","lastModified":1782338098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some ...","intro-desc":"This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some or all of these actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1782338048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Culture, as we understand it, follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1782338049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/get-started","title":"get-started","version":"","breadcrumbs":"","lastModified":1777298985,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/object-page-content-area-sap-fiori-elements","title":"Object Page – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/media_11fd078b8b3628d4618205383af52e7d4aa52da69.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/situation-handling","title":"Situation Handling","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve ...","intro-desc":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve the situation by gathering all relevant information and proposing solutions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/media_1e8f9d4420c40c8e895d76b722653bc51ba327f58.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/worklist-sap-fiori-elements","title":"Worklist","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Worklist","lastModified":1782338043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report ...","intro-desc":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/sap-fiori","title":"SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / SAP Fiori","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of ...","intro-desc":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/media_10203c9efe37f765d5bb8f8adc8bcedfee57c6818.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe ...","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/vision-and-mission/media_1ec9991d1adc6d26c349fbdfe17a171c1c93dc1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/object-page-header-sap-fiori-elements","title":"Object Page – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Header","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/object-page/media_1648e6371a26398f6fbedc294b5e47e67b4599684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1782338045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/table-types-sap-fiori-elements","title":"Table Types","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types","lastModified":1782338043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/list-sap-fiori-elements","title":"List","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / List","lastModified":1782338043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","intro-desc":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/tables-toolbar","title":"Table Toolbar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Toolbar","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/media_104a4cc90b3026bd75b11042940583fa5b5548916.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/terminology-sap-fiori-elements","title":"Terminology for SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Terminology for SAP Fiori Elements","lastModified":1782338044,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help you better communicate with application developers, this article presents:","intro-desc":"To help you better communicate with application developers, this article presents:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/sap-s4hana-design-decisions","title":"SAP S/4HANA Design Decisions","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Design Decisions","lastModified":1782338046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Contains design decisions for SAP S/4HANA. If needed, the respective guideline articles introduce the decisions with SAP S/4HANA Only.","intro-desc":"Contains design decisions for SAP S/4HANA. If needed, the respective guideline articles introduce the decisions with SAP S/4HANA Only.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1782338049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section outlines the foundations of the SAP Design System for web applications.","intro-desc":"This section outlines the foundations of the SAP Design System for web applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/community/contact-us","title":"Ask the Community","version":"","breadcrumbs":"Community / Ask the Community","lastModified":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/table-features-sap-fiori-elements","title":"Table Features","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Features","lastModified":1782338098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for a table detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for a table detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/get-started/ui-elements-overview","title":"UI Elements (SAPUI5)","version":"","breadcrumbs":"Discover / Get Started / UI Elements (SAPUI5)","lastModified":1782338046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the UI elements used in SAP Fiori. UI elements range from simple controls to complex controls, and include reuse ...","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/get-started/web-components-overview","title":"SAP Web Components","version":"","breadcrumbs":"Discover / Get Started / SAP Web Components","lastModified":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We have introduced a first set of design guidelines for SAP Web Components. SAP Web Components are framework-agnostic and can be easily integrated into different ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/get-started/media_12c8c68ae8c7d17854de507386d239a379850268d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Cultural Differences in Needs and Behavior","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Cultural Differences in Needs and Behavior","lastModified":1782338049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects ...","intro-desc":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects may include socio-cultural norms and conditions; beliefs; attitudes to responsibility and taking the initiative; established practices; demographics; and trends in technology. They may also have an impact on design decisions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home","title":"SAP S/4HANA Product Home Page – My Home","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Product Home Page – My Home","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP S/4HANA product home page is an alternative to the SAP Fiori My Home page when using SAP S/4HANA Cloud. Whereas the previously available ...","intro-desc":"The SAP S/4HANA product home page is an alternative to the SAP Fiori My Home page when using SAP S/4HANA Cloud. Whereas the previously available SAP Fiori My Home page is the entry point to a personalized set of apps, presented as tiles or links, the SAP S/4HANA product home page orchestrates much more information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/media_1dfcf1fcf1c5bb1d0ae99a26f5b9aa938816aafa8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/table-rows-sap-fiori-elements-2","title":"Table Rows","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Rows","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/frameworks/sap-fiori-elements/tables-and-lists/media_1948a2122825f177b562e760408c8a2a24ccbb7f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777299001,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Overview","lastModified":1782338072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about SAP's generative AI strategy, our approach to developing guidelines, and the foundation guidelines you'll need to get started.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design","lastModified":1782338075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the guidelines to understand the basic AI design principles and what it takes to craft a good AI experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines","title":"AI and Joule Design – Guidelines","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Guidelines","lastModified":1782338074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Follow five guiding principles whenever you design generative AI features.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/versioning","title":"SAP Fiori for Web – Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1782338070,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/ai-design-contact-us","title":"AI Design – Contact Us","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design – Contact Us","lastModified":1782338074,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Artificial intelligence (AI), particularly generative AI, is an exciting and dynamic topic. We decided to publish the generative AI design guidelines early in the process ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/important-links-on-ai","title":"Important Links on AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Important Links on AI","lastModified":1782338183,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Artificial Intelligence at SAP                     SAP’s Guiding Principles for AI                     SAP’s AI Strategy                     SAP’s Generative AI Assistant Joule Discover How Generative AI Is Transforming The User Experience (TechEd 2023 Lecture)","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/foundation/ai-colors","title":"AI Colors","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Colors","lastModified":1777299001,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates the importance and association between UI elements and AI-powered features that enhance them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/foundation/media_1e42af22d41f3d2cb674e6e1ce86e9293e22bc193.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/ai-design-roadmap","title":"AI Design Roadmap","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / AI Design Roadmap","lastModified":1782338071,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In the following, product teams can find the Q1 and Q2 roadmap for","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/designing-safety-into-gen-ai-experiences","title":"Designing Safety into Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Safety into Generative AI Experiences","lastModified":1782338073,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI safety is a big concern for a lot of people, and for good reasons. AI systems are becoming increasingly powerful, and if they’re not ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/joule-assistant/joule-icon","title":"Joule Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule Assistant / Joule Icon","lastModified":1782338076,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We’ll continue to refine and evolve these guidelines based on insights from the product teams and other experts across our ecosystem. Any input you might ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/joule-assistant/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/foundation/ai-icon","title":"AI Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Icon","lastModified":1777299001,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI icon can be used alone, in buttons, or alongside labels or text to indicate content powered or generated by AI. The embedded AI ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/foundation/media_1e33cac0ef525d2a57692090d6fc280718eecf9cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/joule","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule","lastModified":1782338071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the icon for SAP's conversational AI panel.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/building-trust-with-generative-ai","title":"Building Trust with Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Building Trust with Generative AI","lastModified":1777299001,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With all of the exciting advances being made in generative AI, there are also real ethical questions and concerns arising around things like accuracy, reliability, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_110543980ca2999021760d547cd445162766a825e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/ranking","title":"Ranking","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Ranking","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Ranking simplifies complex decisions for business users by showing the best options first.","intro-desc":"Ranking simplifies complex decisions for business users by showing the best options first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_17802c166b7e4b6ac057feff2e5f92f82e285265d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/generative-ai-design","title":"Designing for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing for Generative AI","lastModified":1782338071,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Generative AI and other emerging AI capabilities will have a significant impact on global businesses and society in the upcoming years. SAP has responded to ...","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/foundation","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Foundation","lastModified":1782338075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the AI color palette for embedded AI and Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"Business Roles and Tasks","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Business Roles and Tasks","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for mapping a business role to SAP Fiori, including:","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/designing-intelligent-systems","title":"Designing Intelligent Systems","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing Intelligent Systems","lastModified":1777299002,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section covers the design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/media_196fd67266d0e616f12adfe04a08c39cfea9a7867.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/matching","title":"Matching","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Matching","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The ...","intro-desc":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The system presents one or more strategies for linking similar objects, and indicates the quality of each strategy. Users then only need to approve or reject the suggestions, or adjust them to their needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_12416838ad91b023b9bda7657601f468d18982632.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/recommendations","title":"Recommendations","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Recommendations","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of ...","intro-desc":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of a recommendation pattern and its impact on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_1e8ddcce56382a57087a5cb9f95aede02449e1145.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/design-principles-for-generative-ai","title":"Design Principles for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Design Principles for Generative AI","lastModified":1777299001,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Generative AI can transform entire industries, and it’s already changing how we live and work. Its ability to generate novel content, whether text, image, data, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_15dfc9c807154058f1158664ed9984d7a09553dc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/effective-ai-prompts","title":"Designing Effective AI Prompts","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Effective AI Prompts","lastModified":1777299002,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In the context of generative AI experiences, a prompt refers to the instruction given by a user to guide the output of a generative AI ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_1a4bd171b358cf8337c61385170a58f2e03a5b349.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be ...","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with ...","intro-desc":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/media_1ae5c2959796dec30e438debe112eb27b08d113ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"Foundations / Best Practices","lastModified":1782338076,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/joule-assistant","title":"joule-assistant","version":"","breadcrumbs":"","lastModified":1777299002,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1782338076,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/best-practices-for-designing-sap-fiori-apps","title":"Best Practices for Designing SAP Fiori Apps","version":"","breadcrumbs":"Discover / Get Started / Best Practices for Designing SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you ...","intro-desc":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/media_1b27db6dd4b6c0eec3b05bd02699ba8e86b44bd1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/designing-sustainable-gen-ai-experiences","title":"Designing Sustainable Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Sustainable Generative AI Experiences","lastModified":1777299001,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating product experiences that all people love has always been our compass. As we integrate generative AI into the experiences we craft, we must stay ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_1bbff00a72ac042d0f979ea708b3631c82a9638cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/sap-products/sap-s4hana-only/media_12a7af32dcdde6d1dc193a9433388fe94cfb79fce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/ai-design-quality-checklist","title":"AI Design Quality Checklist","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / AI Design Quality Checklist","lastModified":1782338071,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"It is important to establish standards for SAP AI experiences quality. To get started, we are providing a first set of guiding questions and mandatory ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/explainable-ai","title":"Explainable AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of ...","intro-desc":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of an algorithm. This is even more critical in business applications, where users are held accountable for the decisions they make.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_1168ad1270482479ce4fa0d4a290ea4dc295be08e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/ai-design-glossary","title":"AI Design Glossary","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design Glossary","lastModified":1782338072,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To provide you with some quick help on AI terminology used in or referred to within our guidelines for ‘Designing Intelligent Systems’, you can find ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/feedback-loop-in-intelligent-systems","title":"User Feedback","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / User Feedback","lastModified":1782338073,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In the context of intelligent systems, “user feedback” refers to the process of collecting, interpreting, and integrating user feedback into the system to improve the ...","intro-desc":"In the context of intelligent systems, “user feedback” refers to the process of collecting, interpreting, and integrating user feedback into the system to improve the intelligence and the results.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/ai-and-joule-design/guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/discover/whats-new","title":"What’s New in Guideline Version 1.120","version":"","breadcrumbs":"Discover / What’s New in Guideline Version 1.120","lastModified":1782338070,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.120.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.120.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1777299032,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782338176,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1782338053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In general, use long text to display units of measurements, and do not use abbreviations, such as (ISO) codes.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level ...","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/media_16f99fa6efcbe276c93111f8e44bafa685a0292cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/delete-objects","title":"Object Handling – Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the ...","intro-desc":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the items depends on the structure of the object (simple or complex).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1420ac552e13b7b375167d6c0dc74f30370306117.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777299032,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/copy","title":"Object Handling – Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Copy","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_19c2b382122892c2af0945dd02aeb09a4cc5f41a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1782338051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782338166,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data ...","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Object Handling – Partial Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Partial Edit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_151176540ca66a2118dae22b47e68ef45b94f4f55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/media_108541462ce9e30919b7314c39a25f4645d7be76f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1782338052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Object Handling – Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_18613303bfe2a1150661fb1e7e7277403519fcba6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/designing-for-empty-states","title":"Empty States","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Empty States","lastModified":1777299032,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"Live","description":"Empty states are moments in the user experience when there is no content to display. They can appear anywhere within an application and occur most ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/media_1d5dcad835a7bb4d9babb1eda8bf2e08811bd7441.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Complex Objects – Local Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Local Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","intro-desc":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1c8c74db63ff7c7cbca5347151b48e2aadd70407e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Object Handling (Create, Edit, Delete)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In addition to the basic display option, the following actions are available for objects:","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1777299032,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Simple Objects (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Simple Objects (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows ...","intro-desc":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1a1cc118fe7262666a86d6ce90117d257b1581cc7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1777299032,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage leading and trailing white space (blanks) when copying and pasting text into input controls (such as input fields, text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/media_1c3891164147b26d35d90c36cd06324f775f90cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1782338053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1782338053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Complex Objects – Global Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Global Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","intro-desc":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_107badff44f210450a3174b27162b1185cbeb4ef7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization can be used to modify the display and settings of a table.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/tables/media_148972a96b93f46542626688003fc01290f86c781.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"A table contains a set of line items, each displayed as a row that’s divided into columns. Line items can contain data of any kind, ...","intro-desc":"A table contains a set of line items, each displayed as a row that’s divided into columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/tables/media_107217f2f7767be3a21c2af8878d32a1590596cbf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation ...","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/navigation/media_1e93ccccc2b283d2a243d359a6999c48eb4e66169.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1777299033,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/media_1380d05378bd5264023e6fc84e6076138ccf9a380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual","title":"visual","version":"","breadcrumbs":"","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services","title":"integration-and-services","version":"","breadcrumbs":"","lastModified":1777299047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1782338091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1782338092,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-my-home","title":"SAP Fiori Launchpad “My Home”","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad “My Home”","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a ...","intro-desc":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_153f77eff06072cef783df71456d92d13520fa096.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1782338093,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to create icons for web apps in a third-party marketplace.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/interaction","title":"interaction","version":"","breadcrumbs":"","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"","lastModified":1782338176,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772 and Sunset of the SAP Fiori Client.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"SAP Fiori Launchpad – Merged Header","version":"","breadcrumbs":"","lastModified":1782338177,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/iconography/iconography-horizon","title":"Iconography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Horizon","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons have been redesigned for the Horizon visual themes with a fresh, friendly, yet bolder style that is consistent in terms of size, stroke, ...","intro-desc":"SAP icons have been redesigned for the Horizon visual themes with a fresh, friendly, yet bolder style that is consistent in terms of size, stroke, and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/iconography/media_1f2087eb3de50248a2330cfd7a5fb981499c862da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/interaction/wrapping-and-truncation","title":"Wrapping and Truncation","version":"","breadcrumbs":"Foundations / Interaction / Wrapping and Truncation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the ...","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/interaction/media_19021421d9e10018b60ed9e66ee3c8e613ef2b580.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/design-tokens","title":"Design Tokens","version":"","breadcrumbs":"Foundations / Visual / Design Tokens","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and ...","intro-desc":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and are linked directly to the SAP base theming content implementation that is used for all products to adopt the SAP standard and accessibility themes across all SAP technologies and platforms. Using design tokens instead of hard-coded values can streamline the work of building, maintaining, and scaling products with a design system.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_19f44ec8c49dbcb36970036ed3b9aae7d422ed116.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/interaction/interaction-foundations-value-states","title":"Value States","version":"","breadcrumbs":"Foundations / Interaction / States / Value States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value ...","intro-desc":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/interaction/media_10e851a8c8f40f08eebacbf1c12e300572e4cecee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1777299047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/media_1dd38bfc64a884844c90532d7384523cda110c084.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and ...","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder allows you to browse all SAP Fiori, SAP GUI, and Web Dynpro ABAP apps in one place. It is available in the ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_13ba1291ffd940838846eceac47655f24ccc9df23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad home page is the first page that users see after they have signed in. It is the main entry point to ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_16dc3be2f9443e29d0ed0116bec26f5abcfe32481.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/interaction/overview","title":"Interaction Design Foundations","version":"","breadcrumbs":"Foundations / Interaction / Interaction Design Foundations","lastModified":1782338091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/interaction/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-spaces","title":"SAP Fiori Launchpad Spaces","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Spaces","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_16f72ac0248bab2c56af202e3d0551b6e21b6d631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/iconography/service-icons","title":"Service Icons","version":"","breadcrumbs":"Foundations / Visual / Iconography / Service Icons","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Service icons communicate the purpose of an application within third-party marketplaces. They are the web counterpart to the mobile app icons.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/iconography/media_1e03f65455d1928106fd98f9c9c00e827845a82e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/iconography/icons","title":"Iconography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored ...","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/iconography/media_11d9d449f052b4f87fbbb2871ec6f63b4a6e3e76c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_130348e70d783a65fed4991372085a7fd06ba1142.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Which Selection Control Should I Use?","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Which Selection Control Should I Use?","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support ...","intro-desc":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support dedicated use cases. This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/media_1fbf5806ea6a90aa61abe81230bd18da77eedbf54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1777299047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/ui-elements/media_1f49304e3714d72ea4dceed1442cd7eb1d81361b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After entering a search term, users can trigger the search by pressing ENTER, by clicking the magnifier icon, or by selecting one of the suggestions. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/integration-and-services/sap-fiori-launchpad/media_1c99516cb73d573ee3cd8b163bcfac119b8bf85a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777299017,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777299017,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"","lastModified":1777299018,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Forwarding items is now handled by a Forward action in the Share menu of the header toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/messaging/processing-multiple-items","title":"Message Handling – Processing Multiple Items","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Processing Multiple Items","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"When a user selects multiple items from a table, it might not be possible to process all of the items at once.","intro-desc":"When a user selects multiple items from a table, it might not be possible to process all of the items at once.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/messaging/media_1f814c060f04e00e414ce785987d3ef3a347b4c32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling – Overview","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But ...","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/messaging/media_139884682f4371430549515bb250c4886df56dc47.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Object Handling – Mass Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Mass Edit","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","intro-desc":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_1882138d3f9c25bf3fb26ee3a7984f13022fa8769.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","intro-desc":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/best-practices/global-patterns/object-handling/media_14824efef9dca768e282b67d962819d953809c925.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/typography","title":"typography","version":"","breadcrumbs":"","lastModified":1777299064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1777299064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations","lastModified":1782338061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different application themes and how they support accessibility standards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1782338060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/typography/typography","title":"Typography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is an alternative theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, ...","intro-desc":"Quartz Light is an alternative theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/typography/typography-horizon","title":"Typography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Horizon","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/theming","title":"Theming","version":"","breadcrumbs":"Foundations / Visual / Theming","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also ...","intro-desc":"The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also Quartz Light, Quartz Dark and the accessibility themes High-Contrast Black (HCB) and High-Contrast White (HCW).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_1a45413ea46ccff86dd6b5add932ebb90eca1d89a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/ux-illustrations","title":"UX Illustrations","version":"","breadcrumbs":"Foundations / Visual / UX Illustrations","lastModified":1779893363,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"UX illustrations are visual elements that can be paired with written messages. You can use UX illustrations to:","intro-desc":"UX illustrations are visual elements that can be paired with written messages. You can use UX illustrations to:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_196b57e2bef5b13b35019cffa202f37945f66c34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/colors/evening-horizon","title":"Evening Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Evening Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/colors/media_1b96154f01f35e4caeba1e1066a19f50f52baa5ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/colors/morning-horizon","title":"Morning Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Morning Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. ...","intro-desc":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/colors/media_1a3f13591278075c4a8d5b2dcddd2db222eb28b65.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance ...","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/colors/quartz-dark-colors","title":"Quartz Dark Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Dark Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/colors/media_14502ab4f6d1a3687f67f65a2395e4672020106de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans","title":"floorplans","version":"","breadcrumbs":"","lastModified":1777299081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types","title":"page-types","version":"","breadcrumbs":"","lastModified":1777299081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1777299081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording","title":"Writing and Wording","version":"","breadcrumbs":"Foundations / Writing and Wording","lastModified":1782338058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1782338176,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1782338176,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1777299080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1782338057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page","title":"Overview Page (OVP) Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) Floorplan","lastModified":1782338176,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, and view, filter, and react to                     information quickly.Each task or topic is represented by a card (or content container). The overview page acts as a UI framework for organizing multiple cards                     on a single page.The overview page is based on SAP Fiori elements                     technology, and uses annotated views of app data, meaning that the app content can be tailored to the domain or role. Different types of                     card allow you to visualize information in an attractive and efficient way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Cards","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Cards","lastModified":1782338176,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards – Harmonized and Powerful InformationEach task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards for one role on a single page .Cards are containers for app content, and represent an entry-level view of the most pertinent app data for a given topic or issue. Technically, a card is a smart component that uses UI annotations to render its content. Cards allow you to show application content from different sources side by side – without requiring the user to switch screens. Cards differ in the content they display:                     They can show a chart, a list, a table, informative text, or a combination of two elements. However, cards never have editable fields.Cards can focus on a single object or topic, or on a group of objects. Cards can also vary in size, depending on the selected layout.The overview page can contain several cards that reference the same (parent) application. However, each card must bring added value to the user, and not just repeat information already offered on another card.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplan-overview","title":"Page Layouts and Floorplans","version":"","breadcrumbs":"Page Types / Page Layouts and Floorplans","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","intro-desc":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/media_1c4d78afccc080f19471585c3c3a457cddaaef55e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The sections below describe the guidelines for each of these texts.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/analytical-list-page","title":"Analytical List Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page Floorplan","lastModified":1782338176,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"Analytical list pageThe analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, and to act on transactional content. All this can be done seamlessly within one page. The purpose of the analytical list page is to identify interesting areas within datasets or significant single instances using data visualization and business intelligence.Visualizations help users to recognize facts and situations, and reduce the number of interaction steps needed to gain insights or to identify significant single instances. Chart visualization increases the joy of use, and enables users to spot relevant data more quickly.The main target group are users who work on transactional content. They benefit from fully transparent business object data and direct access to business actions. In addition, they have access to analytical views and functions without having to switch between systems. These include KPIs, a visual filter where filter values are enriched by measures and visualizations, and a combined table/chart view with drill-in capabilities (hybrid view). Users can interact with the chart to dig deep into the data. The visualization enables them to identify spikes, deviations and abnormalities more quickly, and to take appropriate action right away.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782338176,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported ...","intro-desc":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported in the same way: interaction with a mouse and keyboard as well as by touch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_181991c8bd8f95f41457f4f175f559c5b8c3f9bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the ...","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/web-assistant","title":"SAP Companion","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / SAP Companion","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on ...","intro-desc":"SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on top of the current application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/media_13bfab4ae6bcc6c39aefca7e82ba6f84cb5a034df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1782338097,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the ...","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/initial-page-floorplan/media_1c24b9881a2fb6ef7a56e348a9954eadb038b73b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777299081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page/media_10987990b7b041e44a914b702aa39e51da4b32342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"Foundations / Visual / Motion Design","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time ...","intro-desc":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time dimension that makes it an ideal medium for storytelling. In the context of SAP Fiori, motion design and microinteractions work together to provide our users with a coherent user experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/visual/media_1199a7a4e3bf13956d83bc9a1de308a26ae1b2579.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/situation-handling-framework-ui-text-guidelines","title":"Situation Handling Framework – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Situation Handling Framework – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline applies to the texts that you can define for Situation Handling. The guidelines apply to the standard framework and the extended framework. The ...","intro-desc":"This guideline applies to the texts that you can define for Situation Handling. The guidelines apply to the standard framework and the extended framework. The goal of this guideline is to provide you with formulation patterns and best practices to support you when creating text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/media_1ceba85e2a0519b5016378ad08e04e98de45fc1fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the list report header and content ...","intro-desc":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_1549c39ca8f620954aec85464c960f4de7b633ee8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/analytical-list-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, ...","intro-desc":"Analytical list page","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/analytical-list-page/media_1bb7d2c7787f3b141a3951641b332863f003af641.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/object-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the object page header, content area, ...","intro-desc":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/object-page/media_15f578a0c33aa6dda2b04ee87e20811a0a2c98a57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/ui-text-guidelines-for-sap-fiori","title":"UI Text Guidelines for SAP Fiori Apps","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Guidelines for SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","intro-desc":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/foundations/writing-and-wording/ux-writing/media_1486c8bc4172f44b723e46d4bf6bf48bcf765c128.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1782338054,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1777299094,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts","title":"page-layouts","version":"","breadcrumbs":"","lastModified":1777299095,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782338054,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1782338167,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Take Action on the Overview PageAs well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This is supported by a special interaction pattern with a set of closely-integrated card types: the stack card, object stream, and quick view card. These three card types are only ever used together, and navigation between them has been optimized to best support user needs.A stack card is a collection of quick view cards, which provide a footer area with actions. These quick view cards are displayed in the object stream (overlay). The advantage of using stack cards is that users don’t have to leave the overview page, and therefore don’t lost their focus.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299095,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299095,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1782338167,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Lists with Different FlavorsList cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar chart list card, and link list card. You can also show icons and images. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1782338167,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Self-Contained CardsThe fixed card layout is a layout for the overview page. It comes with                     predefined card characteristics that support automatic, easy and fast card design. The cards have a fixed width, and the height is determined by the card type and the                     embedded control.The cards are ordered in responsive and collapsible columns. The number of columns is also fixed to keep the focus on the middle of the screen and show the set of cards                     in a compact display (a kind of letterboxing). For more information, see Responsiveness.The fixed card layout is one of two layout options for the overview page. The other is the resizable card layout.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1782338054,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1782338167,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299095,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782338054,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782338168,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/when-to-use-which-floorplan","title":"When to Use Which Floorplan","version":"","breadcrumbs":"Page Types / When to Use Which Floorplan","lastModified":1777299096,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Choosing the right floorplan is not always easy. Roughly speaking, SAP Fiori offers floorplans that:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1038cab413a616913e9b43568a3e103b9fe31d937.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1782338167,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Adaption of standard cardsCustom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card content area. They offer additional flexibility when you require features that are not offered by the standard cards for overview pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299095,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1782338166,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299094,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1782338167,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout is a layout for the . It                     enables users to define a personalized card layout by                     changing not only the position of a card, but also its                     size, and thus how the card content is presented.This layout gives users much greater flexibility in                     tailoring the overview page to their specific business                     needs. And it allows app teams to offer varying levels of detail for any given card. Whenever the size of a card                     changes, the content adapts automatically to show the                     most relevant information in the available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299095,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299094,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782338167,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.The worklist is a versatile floorplan that offers three main variants: a simple worklist (plain page with a table), a worklist with tabs, and a worklist with one or more KPI tags. These variants are based on different user needs and use cases. For more details, see the options under Components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/flexible-column-layout/media_19a49aa9599337bfb3e5410d464f3afd9b164a826.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see Worklist in the SAP Fiori Elements section.","intro-desc":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/work-list/media_1da586d19728bbc318a095878202d146cb1bf1aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299095,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1782338178,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.Since the flexible grid behaves responsively, it is suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources","title":"resources","version":"","breadcrumbs":"","lastModified":1777299110,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782338178,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.Beforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.As a result, the user can work on several objects simultaneously and switch between them easily.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782338178,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.One part of the dynamic page header (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299110,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1782338081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1782338177,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/letter-boxing/media_1b9793eb36bcd37dcb7e0f6f6875f012c4604a06c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP ...","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries/ai-ui-starter-kit","title":"AI UI Starter Kit in Figma","version":"","breadcrumbs":"Resources / UI Kits / AI UI Starter Kit in Figma","lastModified":1777299110,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Join designers across SAP in delivering cohesive AI user experience with this AI UI Starter Kit in Figma. Leverage this starter kit for your design ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/libraries/media_10a375152a563ac0e729c62a33166d4123dcbe379.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/page-web-component","title":"Page","version":"","breadcrumbs":"Page Types / Page Layouts / Page","lastModified":1782338177,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The page is a container component for a full application screen comprising a header, content area, and footer.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299110,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299110,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/page-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The page is a container component for a full application screen comprising a header, content area, and footer.","intro-desc":"The page is a container component for a full application screen comprising a header, content area, and footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/page-web-component/media_1428b3579991178bdf89b7030feff3a9afed9db4d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries","title":"libraries","version":"","breadcrumbs":"","lastModified":1777299110,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/semantic-page","title":"Semantic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Semantic Page Layout","lastModified":1782338177,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.Using the semantic page significantly reduces the development effort for app teams, and ensures that the placement of the header and footer content conforms with the SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1782338177,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined ...","intro-desc":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/semantic-page/media_128a69021abefd20cd335eeb71738fafed96eaae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782338178,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/downloads","title":"Download Fonts","version":"","breadcrumbs":"Resources / Libraries / Download Fonts","lastModified":1782338082,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the links below to download the following SAP fonts:","intro-desc":"You can use the links below to download the following SAP fonts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries/design-stencils-for-figma","title":"SAP S/4HANA Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP S/4HANA Web UI Kit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use this web UI kit to create high-fidelity SAP Fiori designs using Figma.","intro-desc":"You can use this web UI kit to create high-fidelity SAP Fiori designs using Figma.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/libraries/media_17ceb6016c09ec21ed61487e4d21e2ebd0aeff97e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/flexible-grid/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also ...","intro-desc":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/flexible-grid/media_1aa1ad1f3fccb9dbb40debc7533de84f2611f4835.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/user-research","title":"user-research","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-prompt-input","title":"AI Prompt Input","version":"","breadcrumbs":"UI Elements / AI Prompt Input","lastModified":1782338168,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Target Design","description":"The AI Prompt Input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed in natural language: custom prompts written by a user. In addition to text, it may also support other input modalities such as images, voice, or various file formats.This component is part of a set of UI elements and UX patterns for instructing or prompting generative AI. For more information, see the Designing Effective AI Prompts article, and Quick Prompts, and Guided Prompts patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1777299124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1381c1ca2dcf879ab68ec6ce17f5405b744528d39.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1777299125,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"An analytical table, also known as an ALV or ULV, contains a set of data that is structured in rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_18b73cb1e28bec04145d94f0ddbe4e63c36cfea90.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries/design-stencils-for-axure-rp","title":"Design Stencils for Axure RP","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries/design-stencils-for-sketch","title":"Design Stencils for Sketch","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-progress-indicator","title":"AI Progress Indicator","version":"","breadcrumbs":"UI Elements / AI Progress Indicator","lastModified":1782338168,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"AI progress indicator provides information about the                     status of a user’s request while they wait for the                     content to be generated. The main goal of this pattern is                     to keep the user engaged and informed, manage their                     expectations, and show that the system is actively working.This article discusses the usage of AI progress indicator                     in text-generation scenarios.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-button","title":"AI Button","version":"","breadcrumbs":"UI Elements / AI Button","lastModified":1782338168,"designowner":"","uielementstechnology":"--","elementtype":"Component","uielementscategory":"Action","elementstatus":"Target Design","description":"AI buttons allow users to trigger an AI-powered feature available as a quick prompt                     within the user interface. The AI icon lets users know where AI-powered actions are                     available.The AI button extends the following components to enable new AI-specific interactions:                     Button                     Menu button","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/support/core-design-services/core-design-services","title":"Core Design Services – Overview","version":"","breadcrumbs":"Support / Core Design Services / Core Design Services – Overview","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This is your one-stop destination for questions related to commonly used components and design system foundations for SAP Fiori for web. Are you looking for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/support/core-design-services/media_1a7bd11f41628140d39e62b328ce97dafeaf588e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/user-research/user-research-method-cards","title":"User Research Method Cards","version":"","breadcrumbs":"Resources / User Research / User Research Method Cards","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"User research helps you to better understand end user needs, expectations, and typical working processes as you follow SAP’s design-led development process. This easy-to-use card ...","intro-desc":"User research helps you to better understand end user needs, expectations, and typical working processes as you follow SAP’s design-led development process. This easy-to-use card deck provides an overview of the 14 most commonly practiced user research methods at SAP and how to apply them. Most of the methods can be used both physically and virtually.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/user-research/media_15895282183ca5a524ece0f6b530106bdb7a123b7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/support/core-design-services/support-process","title":"Support Process Overview","version":"","breadcrumbs":"Support / Core Design Services / Support Process Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the graph below for more details of the steps we follow.","intro-desc":"Our support process covers three main areas:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/support/core-design-services/media_1c41fa26804982ec5c75062c873e70066d89b44f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries/sap-web-ui-kit","title":"SAP Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP Web UI Kit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit in Figma contains the components used most commonly across SAP products, such as buttons and inputs. It can be used ...","intro-desc":"The SAP Web UI Kit in Figma contains the components used most commonly across SAP products, such as buttons and inputs. It can be used standalone, although many product teams use it as a connected library that can be cascaded to their own product-specific extensions. This means that they do not have to duplicate the commonly used components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/libraries/media_15c271d8b305f3e6888cc247ed4743ccde3253e32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-acknowledgment","title":"AI Acknowledgment","version":"","breadcrumbs":"UI Elements / AI Acknowledgment","lastModified":1782338056,"designowner":"AI Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"AI acknowledgment brings essential information and announcements about a present AI service to the users’ attention in a standardized way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries/design-stencils-for-adobe-xd-2","title":"Design Stencils for Adobe XD","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-button/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777299125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/ai-button/media_19f7d103ebc52e908d2bbe297e395aa98266be150.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/support/core-design-services/supported-components","title":"Supported Components","version":"","breadcrumbs":"Support / Core Design Services / Supported Components","lastModified":1782338056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components ...","intro-desc":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components that we expect to be used broadly across all SAP products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/support/core-design-services/media_118f2112aec2fee7578b80cf6b18e5d716c969941.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar-group-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar group displays several avatars together, indicating that more than one person or business entity is associated with an item.","intro-desc":"The avatar group displays several avatars together, indicating that more than one person or business entity is associated with an item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/avatar-group-web-component/media_143f1fac4a32f466c18c9365cc07418819ad2573c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar-group-web-component","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1777299125,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays several avatars together, indicating that more than one person or business entity is associated with an item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1013ce6c8d61b3c41b14295862d908f7ee0d5cda7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-notice","title":"AI Notice","version":"","breadcrumbs":"UI Elements / AI Notice","lastModified":1782338168,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Transparency is essential for building trust when incorporating AI into product experiences, and the AI notice is pivotal in achieving transparency. It informs users when content is AI-generated, reminding them to double-check its accuracy before using it.This article focuses on the AI notice in text generation scenarios.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-progress-indicator/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback ...","intro-desc":"AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of this pattern is to keep the user engaged and informed, manage their expectations, and show that the system is actively working.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/ai-progress-indicator/media_1027b816ced4a0f49b7a10e324d201c09f915865c.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-notice/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777299125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/ai-notice/media_1c7ed606102d4fbbdc136540146ab155c39a664d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/action-sheet/media_1307ced44ac8cd3751cbe373127338a6dd1b3b55b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/support","title":"support","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/support/core-design-services","title":"core-design-services","version":"","breadcrumbs":"","lastModified":1777299124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/libraries/joule-web-ui-kit","title":"Joule Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / Joule Web UI Kit","lastModified":1777299124,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can access the Joule Web UI Kit in Figma. Please contact Shilpa Tripathi Jurinek for feedback and guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/libraries/media_1ca3abbe107053baaffa7472438e46410ea8a9275.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-acknowledgment/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777299125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/ai-acknowledgment/media_169c77503af531ab3b4d9b89d48f4a691cf47572a.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/ai-prompt-input/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777299125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/ai-prompt-input/media_1b2fe0981b422fbedaf5b607573bc6a8128e9166d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/resources/user-research/how-to-present-your-sap-fiori-app","title":"Showcase SAP Fiori Apps in Device Frames","version":"","breadcrumbs":"Resources / User Research / Showcase SAP Fiori Apps in Device Frames","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images ...","intro-desc":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/resources/user-research/media_1404359f37fcc643bcd23e295ca90721d58fd9542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/analytical-table-alv/media_1e7183a20648f018b82be40008d0dcafabad03cb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1782338187,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.The checkbox text describes the positive action (as in “true” or “yes”). The text can be either a label control to the left of the checkbox, or a checkbox text that appears to the right of the box. If there is only one checkbox, you can use a label or text depending on the form format.                     If there is more than one checkbox, the label describes the whole group of checkboxes. In this case, use the text property of the checkbox to describe the individual checkboxes.                     Within a group of checkboxes, each checkbox can be checked or unchecked. The user can check multiple options.A checkbox does not apply a setting right away; the changes take effect after user confirmation via a triggering action button (such as Save).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/breadcrumbs-web-component","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb is a type of secondary navigation that indicates the position of a page in the application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_13913dbce8e78b62449fb265fe87218d2fdea608a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/button-web-component","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons allow users to trigger an action and come in a variety of shapes and colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1ed30a50a1c0c0242376368734ad8ce8f0e85aae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/card-web-component","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1db02209c33c345b0938b47a962d465e00d05cf8b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar-web-component","title":"Calendar","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar shows time-related data at a glance. It allows the user to select a single day, multiple days, or date ranges and to navigate through different months and years.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1e07b4153295ee79450892a9269f1ac689144009d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/carousel-web-component","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1db02209c33c345b0938b47a962d465e00d05cf8b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/checkbox-web-component","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1989bcdd8ccfed4800b7f5e26baaf8e26bc5a2f72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/checkbox-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox ...","intro-desc":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, S elect All), it can also display an indeterminate state to indicate that not all subitems have been checked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/checkbox-web-component/media_1b474e3668604087733ed6b33665b1e6db9007cce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/breadcrumbs-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set the separator style. The the following options are available:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/breadcrumbs-web-component/media_16001aad44c6e104ec8aebbe717b516617098db88.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/bar-web-component","title":"Bar","version":"","breadcrumbs":"UI Elements / Bar","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The bar is a container that can hold text, titles, buttons, and input elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1d6ae3b7bd729858b27644584d6a5ba6f5d8d5aa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked ...","intro-desc":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/checkbox/media_12de749261dd0eaf2b857c896df7bf87778536559.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/card-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or ...","intro-desc":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/card-web-component/media_17747cd53cc790058ef2dcefdec78a13ecaf2d494.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busy-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the space where the busy indicator is to be placed is limited, avoid using a busy icon text. For example, don’t show a text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/busy-indicator-web-component/media_1300c93feb04a7f178ee1ccf3da8dd49f5f3c2b07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busy-indicator-web-component","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1b4d7d5a695acc87322aad8c4ed7917c5294012bf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bar is a container that can hold text, titles, buttons, and input elements.","intro-desc":"The bar is a container that can hold text, titles, buttons, and input elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/bar-web-component/media_195eaa0ad059716b2bc08d095fc47b63d839dc473.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons allow users to trigger an action and come in a variety of shapes and colors.","intro-desc":"Buttons allow users to trigger an action and come in a variety of shapes and colors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/button-web-component/media_1d95dac4b50e81c8eb27e3ddd6a6963fce84e147f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/carousel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"1. Container: Holds the content, navigation buttons, and page indicator.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/carousel-web-component/media_1b6ba5c09ce59400edbded9b46613cd89b8738c7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar-web-component","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1777299138,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a component for displaying images. Typically, it represents a person in a user profile, a product on a product page, or items/people in a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1977e43113ca844bbae017c3a14448742a9a01b45.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons enable users to trigger actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_11f9de87dda50bb294eb9ff54fa23d00106b40848.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar is a component for displaying images. Typically, it represents a person in a user profile, a product on a product page, or items/people ...","intro-desc":"The avatar is a component for displaying images. Typically, it represents a person in a user profile, a product on a product page, or items/people in a list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/avatar-web-component/media_1a405cde681c29f6d0b3e017d9409974c82defdf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/cards","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1777299139,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1e06d0c9de39a97544326d04ebbede698dd331803.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To change the month, the user can either use the previous/next arrows or select a specific month in the month view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/calendar-web-component/media_1e8e1bcd48e77ffd326c95b700bc25deb8fb37702.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a ...","intro-desc":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/cards/media_12cff613555f634035aef58b44089d164475cab72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons enable users to trigger actions. There are 4 button types:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/button/media_16e4492f8caa4f36c62b0178e4f0bc29119d14db5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette-popover-web-component","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1777299153,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/combo-box-web-component","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1777299153,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1b7a8b8b0d5dbba72f12be1b37feff3c3dd6e8859.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1777299154,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1ec2771196c09049434ea07c5df14aba290e42d07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette-web-component","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1777299153,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_132a212a1cdd659cd8a4a816cc3e821771e78acef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-range-picker-web-component","title":"Date Range Picker","version":"","breadcrumbs":"UI Elements / Date Range Picker","lastModified":1777299154,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range in the calendar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1d1f7c2473ebfc73a98905245c3d02a69cc2364e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1777299153,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1f7d70006e66cebf6791bcc0f7a0a47aedc6c79c7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1777299153,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1015a46097ec43e138a7332e9970675e8a979acb4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-picker-web-component","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1777299154,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users enter a single date and navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1d972e27a2513e784f86e65e92f013156107f674c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299153,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/color-palette-web-component/media_108e91c2d13bbfcc04158b01cceeeef88afdd7851.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299153,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/combo-box-web-component/media_15f323bedbd4fb3b49e6069ba6d707385c047232e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette-popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299153,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover opens when the user clicks on a triggering text link or button.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/color-palette-popover-web-component/media_10191cf92cd4e123db7d7f4454b308c1f3f227276.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users enter a single date and navigate directly from one month or year to another.","intro-desc":"The date picker lets users enter a single date and navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/date-picker-web-component/media_185237c89a2b8323a28340056a615bff6a51df239.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-range-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range ...","intro-desc":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range in the calendar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/date-range-picker-web-component/media_198d228240311fee0e933af5d03f2b91ab7c8d6ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/comparison-pattern/media_1c240b529e72e2fa053c6626e59d9cc68e9fe8645.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299153,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/date-picker/media_1da94e74ba4a2dbee666c10d58a3d53122cee0e52.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/date-range-selection/media_1f39b5eb63b916e76a48ae549205ad4d3f28938f6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-side-content-web-component","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1777299169,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_19a1366816883fe23213bec49f7121f3e8b26fce7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/guided-prompts","title":"Guided Prompts","version":"","breadcrumbs":"UI Elements / Guided Prompts","lastModified":1777299169,"designowner":"AI Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Guided prompts provide structured input-Uls to guide the user in instructing the generative Al model on the desired output.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1cb74121dc0a61e8f35bddd6e1c64c1edfbaaffa1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1777299169,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation for fields in SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_127712ab7624abddda5f9e8059ac610c143784de1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-time-picker-web-component","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1777299169,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select both the date (day, month, and year) and time (hours, minutes, and seconds).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_171f86b89e966abd3d73f38ce3ecda58bee0f33f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1777299169,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_14af2ba20c348efcf7a2da4640d1f43e76e286856.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1777299169,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_15271da5f18efdd46363d0d618ed6e0df8524d552.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dialog-web-component","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1777299169,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog component is a modal window that appears temporarily on top of the main screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_17aa75cb40f44dba8dc5f068c6dc4e2779a584c9d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1777299169,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-date-range-2","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date Range","lastModified":1777299169,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_12edf948aa57e6059c601114cee973637facd51af.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/date-time-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select both the date (day, month, and year) and time (hours, minutes, and seconds).","intro-desc":"The date/time picker allows users to select both the date (day, month, and year) and time (hours, minutes, and seconds).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/date-time-picker-web-component/media_1398db2a48541ae74bc7c600455306665c1aae4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-side-content-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. ...","intro-desc":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. The side content appears in a container next to or directly below the main content. The width or height of the main content area adapts accordingly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/dynamic-side-content-web-component/media_1fe415f4bc8c1e172587b5990270b79f26caed549.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1777299169,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_15b9017700e11f9ab086a086b5362f1f275ee3739.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dialog-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the ...","intro-desc":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the user for a response. While the dialog is open, the main screen is dimmed and blocked. A user action or confirmation is required to return to the main window.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/dialog-web-component/media_12283c89f3952026666f7cb671e0e1c9694cccfa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-date-range-2/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/dynamic-date-range-2/media_19491f55a3818f912dd0e3a2c78244e25ec4d874b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1777299169,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_155dd028a0e7df0bade53b35dc0a4ae0697192fd4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a ...","intro-desc":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/dialog/media_1b262a4dff5a4a69520ac90807071fdaa6e902b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and ...","intro-desc":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and the overview page, and is also available as an alternative layout to the visual filter bar in the analytical list page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/filter-bar/media_11c6902d5d90de4e39bff6479df53fb9e66de70ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/form-field-validation/media_1a60823b6e3a8d75aaaf96487420c63fce7955bf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/guided-prompts/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777299170,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/guided-prompts/media_1a4c7219e3202d4d15a6fa3293c11aa86afecc1ef.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the ...","intro-desc":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/grid-list/media_1b454ce5b965ffd3cacbcca0cf7f7a9a4e50a737d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is optimized for handling large numbers of rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/grid-table/media_1e209d643e6fa81eb0619cd4955bac893f66d1f68.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1782338170,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:                     Filter criteria: The infobar indicates the filter criteria that have been applied for a filter, for example on a table or list. Do not show the infobar if no filter is applied.                     Selected items: In a multi-select dialog, the infobar shows the number of selected items.                     The infobar is placed above the content and shows the applied filters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_10718faa500dacd4d73ca0caa8de6ad070fd24a79.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/input-field","title":"Input Field","version":"","breadcrumbs":"UI Elements / Input Field","lastModified":1777299184,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_12dd57c5b18ca231ba9ccd88cd4222c66ccef0016.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1782338170,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/label-web-component","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1782338168,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name assigned to a component or a group of                     related components. Alternatively, a label can describe                     the purpose of a component or group of related                     components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/input-web-component","title":"Input","version":"","breadcrumbs":"UI Elements / Input","lastModified":1782338188,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"An input field allows users to enter and edit text or numeric values in one line.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1777299184,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_16b5d92a9ddb415a6fcd3d0ea8aa036bb53ce72b0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/icon-web-component","title":"Icon","version":"","breadcrumbs":"UI Elements / Icon","lastModified":1777299184,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector graphic. Icons can be purely decorative or used within interactive elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1e37bd04de087485037dc33e154bd759c4e599c37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/illustrated-message-web-component","title":"Illustrated Message","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1777299184,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1d76af90c5cfb3e0ef8214691ff668117f9f02972.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/illustrated-message-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299184,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An illustrated message has a set of five UX illustrations per use case: scene, dialog, spot, dot, and base. Each variant has a different size ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/illustrated-message-web-component/media_10ff83a999b4bf6192d5f06ca1b38d8616d917ed2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/label-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299185,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Label: The default label comes without the optional “Required” indicator. The user can continue without providing input in the corresponding component or components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/label-web-component/media_1cfbcd62d868069e193cd0ed23c485b499ec665cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/lightbox/media_1b90785d7cd883c0b78b64033924ec34fe0ac3166.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/infobar/media_1ba75fd9c7d23b91ad5f00a6e5de73ed8dbcf1b28.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An input field allows users to enter and edit text or numeric values in one line.","intro-desc":"An input field allows users to enter and edit text or numeric values in one line.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/input-web-component/media_168cf5ac9972c12bce5ebd1d48086d727b78a3257.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/icon-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector ...","intro-desc":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector graphic. Icons can be purely decorative or used within interactive elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/icon-web-component/media_15f2cdd9e19a7723a5f438468581130b546cd16c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/header-toolbar/media_16211bc4d4ad8145a4c8bbb2e6676c81d00b3112a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you ...","intro-desc":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/input-field/media_195a274d7ee02e1e1a463bbfbd6041926962285d4.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1782338187,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/list-web-component","title":"list-web-component","version":"","breadcrumbs":"","lastModified":1777299199,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/menu-button-web-component","title":"Menu Button","version":"","breadcrumbs":"UI Elements / Menu Button","lastModified":1782338188,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782338186,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as hyperlink) is an interactive text                     element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299199,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message page component has been replaced by the illustrated message component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/message-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1782338169,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1782338188,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover control can display multiple messages                     of different types in one list. For example, it might show                     several messages related to entries in a form, or messages                     triggered by a finalizing action, such as Save.The message popover is used in conjunction with a technical message manager, which populates the message                     list. If an error occurs at a validation point, the corresponding message is added to message popover                     automatically, without interrupting the user.Users can browse messages by type and navigate to the message details. In some cases, they can also jump                     directly from the message to the affected field on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"","lastModified":1782338062,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/link-web-component","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782338186,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as a hyperlink) is an interactive text                     element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/link-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299198,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To trigger the event or navigation, the user clicks the link. If a link target has a specified URL, it can also be triggered via ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/link-web-component/media_1d4e7ca627637d49aa1b4b212beccce0a2da66fe9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299198,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The link can either truncate or wrap. Favor wrapping over truncating and keep the link text as short and meaningful as possible.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/link/media_1baef3484015761e8a00e7a19bb9e9807df0fa3b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/list-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML ...","intro-desc":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML content. List items can also be grouped.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/list-web-component/media_1a204d9a8fca716d3fbc7d183780d2e75872b4fcf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/menu-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299199,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visualization of the menu item adapts automatically, depending on which elements are included.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/menu-web-component/media_1a7657263f98d294c5fb1048cd30d3189d2f598e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/menu-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"The menu button offers a set of options for an action, displayed in a menu.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/menu-button-web-component/media_1c966c9452be8146755b335b0c6687624f8d190b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/menu-web-component","title":"Menu","version":"","breadcrumbs":"UI Elements / Menu","lastModified":1782338169,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A menu offers the user a list of alternative actions. The                     actions can also be grouped in submenus.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299199,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/message-popover/media_196246300458de95205337a5e1a57cea757c164b6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/message-box/media_1ec4554406bdc4757477eca2294f2d9170f2f0d86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"","lastModified":1782338062,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1777299213,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The popover displays additional information for an object in a compact way and without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1954cf0633e128c6b20c310d2091eb439571536a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-strip-web-component","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1782338186,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip component allows you to embed                     application-related messages on the UI. It draws the                     user’s attention to information that is important in the                     context of the page content. This could be a warning or a                     change of state that might otherwise be easy to miss.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/quick-prompts","title":"Quick Prompts","version":"","breadcrumbs":"UI Elements / Quick Prompts","lastModified":1782338170,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Target Design","description":"In generative AI, prompts guide the AI’s output to meet users needs that require high-quality instructions.Quick prompts are integrated into workflows for easy access which allow users to execute pre-defined actions effortlessly. These types of prompts are                     crafted by experts known as prompt engineers, who focus on the efficiency of AI.This article discusses the usage of quick prompts.For more information on all types of prompt patterns, see Designing Effective AI Prompts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1777299213,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see parallel appointments and create new events.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c2d479a9e64de20357b6f99a888481f35f737ae4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/progress-indicator-web-component","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777299213,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1f269681f7d8d7f2baa1b06860ab209bce8372fbd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/p13n-dialog/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299213,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the new P13n Dialog page below for the most recent updates.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/p13n-dialog/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multi-input-web-component","title":"Multi Input","version":"","breadcrumbs":"UI Elements / Multi Input","lastModified":1782338172,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple                     values, which are displayed as tokens.To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1782338187,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/popover-web-component","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1777299213,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A popover is a small overlay window that appears on top of the existing content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1954cf0633e128c6b20c310d2091eb439571536a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multi-combo-box-web-component","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1782338171,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box component enables users to select                     options from a predefined list or enter a custom text.It provides an editable input field to filter the list and a dropdown arrow to open the list of available                     options. The select options in the list have checkboxes                     that permit multiple selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/panel-web-component","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777299213,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a responsive container for grouping and displaying information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_11cf6f30ad9cddb0c15ce88090c0ef503580fc775.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-strip-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message strip with or without an icon or Close button. If necessary, you can also configure a custom message strip.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/message-strip-web-component/media_1c85df62d4c76c1d3a5b726845d8023346a145cec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multi-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/multi-input-web-component/media_180f153e02a3558b2a41ba9dee20f5d0f574ea9f6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such ...","intro-desc":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/popover/media_15102e0a496776448e60352dfb0bb45ec1dd6370a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/message-toast/media_1452174aa65f6fe723d9ba054683dbed46c49f6cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299213,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover opens when the user clicks on a triggering text link or button. The popover appears next to the trigger component, but doesn’t obscure ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/popover-web-component/media_13cf2e64bee26072c9ece06244fca9339e948d4ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multi-combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box component enables users to select options from a predefined list or enter a custom text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/multi-combo-box-web-component/media_1ab2ebb975588b55c0ae570df14b02881ca7339e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/panel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you ...","intro-desc":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you can make the content area collapsible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/panel-web-component/media_11356a4925593d71f3b9b6bd6cfbba9467589b6ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/progress-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299213,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Progress Indicator value states (from top to bottom: None, Error, Warning, Success, Information)","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/progress-indicator-web-component/media_1765ecfd6e380f478c39d36ef6716709c27f27098.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/quick-prompts/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777299213,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/quick-prompts/media_1b99bdf48c649e1a232c2959ebb954a79519a04c8.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/planning-calendar/media_1d029dd975301f7ba3629ef3938c58002575c9e7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1782338182,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-popover-web-component","title":"Responsive Popover","version":"","breadcrumbs":"UI Elements / Responsive Popover","lastModified":1777299230,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The responsive popover displays as a popover on desktop and tablet devices but as a dialog on phones.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1a91b5718a977e57ad0676a4c9d5af87fa8a236cc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1777299231,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1dfcdc1819c1f733ccedcbbdcac973961700f94ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782338182,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/range-slider-web-component","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1777299230,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A range slider enables the user to select a value range within a given numeric interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1ec8fab2736e3336ae5668d8e383b163f13e63a43.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1777299229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1501afa032330af7bff0006900d30adbaab351157.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/radio-button-web-component","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777299230,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Radio buttons provide users with a set of mutually exclusive options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1548779dc0b1622bfa08bd9ddb0f65cf46c65a93c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rating-indicator-web-component","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777299230,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rating indicator can be used to rate content or to indicate a rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1ad78a82fb72a15c572668f9745cec75e12f327f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1777299230,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive and searchable list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_17e940461cdaa99b2195232a4a95d466bac8b3687.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1782338182,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.A line item contains several data points sorted into columns. A data point refers to a unit of information, such as a number, a text, a unit of measurement, and so on, which can be used to form the content of a table, form or other control. One data point is usually displayed by a control, such as a text, object status, or input field. A control can display more than one data point, for example, by concatenating text.In contrast to traditional tables, a “cell” of the responsive table is not limited to displaying only one control, and therefore a single cell can present far more than one data point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/segmented-button-web-component","title":"Segmented Button","version":"","breadcrumbs":"UI Elements / Segmented Button","lastModified":1777299230,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A segmented button is a group of buttons that can be toggled.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c471add1161c3dfef81a940ac4baf7d4478f0d03.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/shell-bar","title":"Launchpad Shell Bar","version":"","breadcrumbs":"UI Elements / Launchpad Shell Bar","lastModified":1782338179,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The shell bar is a universal header element that appears at the top of all screens. It provides the product or application context and offers global functions, such as search, notifications, and the user profile.Launchpad shell bar - Home viewLaunchpad shell bar - App view","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive popover is shown as a dialog on a phone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/responsive-popover-web-component/media_1bbe0a776c90b7763f95109b91da722fe46144da1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/range-slider-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider enables the user to select a value range within a given numeric interval.","intro-desc":"A range slider enables the user to select a value range within a given numeric interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/range-slider-web-component/media_11d2f8f5f473582327af0a65317879ec9fb311943.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/select-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select component enables users to select an item from a predefined list.","intro-desc":"The select component enables users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/select-web-component/media_117029138c1a507ab4012cd6f60c05cec8d647a02.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rating-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/rating-indicator-web-component/media_140e678084c6e75ea2a1697020d05df22d86a805c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/side-panel","title":"Side Panel","version":"","breadcrumbs":"UI Elements / Side Panel","lastModified":1777299230,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Area that can be expanded on the side of an app page to show related information and actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1cb7bee000008c2f90c8601518dcd1add29708a1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/select-web-component","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1777299230,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select component enables users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_162724420532f65c99f99db00a71656a6d77fdfbf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The shell bar is a universal header element that appears at the top of all screens. It provides the product or application context and offers ...","intro-desc":"The shell bar is a universal header element that appears at the top of all screens. It provides the product or application context and offers global functions, such as search, notifications, and the user profile.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/shell-bar/media_166451439e781521d7652f35e743c38a78c2d0b76.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/segmented-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Note: The segmented button can be configured to start with no items selected. However, additional customization is required to enable this functionality.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/segmented-button-web-component/media_11be55a04667147e83002d5e48043b9120cd2cd19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/quickview/media_1c26630b4d844c4a3a3b964ac55788481a644a054.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/side-panel/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1781352507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without ...","intro-desc":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page. It can easily be expanded and collapsed, depending on the user’s needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/side-panel/media_12ab0765a3bd29b6815fdf9a3d04cae3e71c07382.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb ...","intro-desc":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/category-navigation/media_16ea748199d8c402123173db74045f3537b3b5388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/radio-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each option is represented by a radio button.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/radio-button-web-component/media_11caa85173e10d1c8a2d4f1838ed460ddea510eea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/select-dialog/media_1aca21b757dc187ca98dde8c074ebf031a21788e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/single-planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/single-planning-calendar/media_170c45d30813df307abfcec9cb834ced953077cf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items ...","intro-desc":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/responsive-table/media_172bfc0c08f7bd5be17c5648984cce48c777a8808.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/step-input-web-component","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1777299245,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1af37aea2cf61df56f80f341a7d74f2174ac5ed37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/split-button-web-component","title":"Split Button","version":"","breadcrumbs":"UI Elements / Split Button","lastModified":1777299245,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_124cb60e6f3c11769b96bca6f88b6e81c39cd4ebd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/slider-web-component","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1782338188,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider enables the user to adjust a single value within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1777299246,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_17243cfb7db8a63525e36ddc1c708cd93b9a1e5c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-field","title":"Smart Field","version":"","breadcrumbs":"UI Elements / Smart Field","lastModified":1782338188,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1782338186,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tab-bar-web-component","title":"Tab Bar","version":"","breadcrumbs":"UI Elements / Tab Bar","lastModified":1782338187,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/switch-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299245,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The switch mimics a physical switch. It allows users to toggle individual features on or off.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/switch-web-component/media_18244d58db96134a780d98381d41024c3a5a50652.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/step-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"The step input component allows the user to change the input value in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/step-input-web-component/media_1545b3aec7a3cc4f305e4f39ca3dc1abe836874c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/split-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions ...","intro-desc":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/split-button-web-component/media_1331b4d9c5e42ef747f512231e4ff8dc1707eb508.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/switch-web-component","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1782338186,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The switch mimics a physical switch. It allows users to                     toggle individual features on or off.Switches are mainly used for settings, personalization, and other use cases where the impact of the switch is                     directly recognizable.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/slider-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider enables the user to adjust a single value within a specified numerical range.","intro-desc":"A slider enables the user to adjust a single value within a specified numerical range.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/slider-web-component/media_118240a748e596e3b310172723a724abf149fe4e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tab-bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to ...","intro-desc":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/tab-bar-web-component/media_1c2cdf8b858b40dbdf35043a1cefb22346c1291d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes ...","intro-desc":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/smart-field/media_13982ddaf16d568b28f5fbf53dd98b2079035ecbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/table-bar/media_163843b8fd5478550baedcb91d0f0a29e66b20474.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. ...","intro-desc":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/smart-table/media_118fbde6f6a28daf57a908ccf016ab3cad214d6c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toast-web-component","title":"Toast","version":"","breadcrumbs":"UI Elements / Toast","lastModified":1782338171,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A toast is a small, non-disruptive popup for a                     non-semantic success message that disappears                     automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toggle-button-web-component","title":"Toggle Button","version":"","breadcrumbs":"UI Elements / Toggle Button","lastModified":1782338169,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).For example, a toggle button might be used to show or hide a screen element or to provide a filtered view of a dataset.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/title-web-component","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1782338170,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title is a simple, large-sized text containing                     additional semantic information about the header level                     for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-web-component","title":"Table","version":"","breadcrumbs":"UI Elements / Table","lastModified":1782338171,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A table contains a set of data that is structured in rows and columns.Table cells can contain any kind of data, including interactive controls that allow users to edit the data, navigate, or trigger related actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1782338169,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.In the case of tree tables and trees, items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single topmost node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toolbar-web-component","title":"Toolbar","version":"","breadcrumbs":"UI Elements / Toolbar","lastModified":1782338170,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1777299260,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1e654853184a3f217c4ce7597b0ce96b6c9e63141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1777299259,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1577adf2c626ba4aae3c6bcb93c56c64106d277b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/title-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299260,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/text-area-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"The text area is an input component that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/text-area-web-component/media_1863ae53db24af94137240cb50074780327a12d38.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toolbar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"A toolbar is a flexible container that can hold various other components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/toolbar-web-component/media_150bfb57b1b0f7079a11e4e8c6ead1e59d2cd9dde.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/text-area-web-component","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1782338187,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table contains a set of data that is structured in rows and columns.","intro-desc":"A table contains a set of data that is structured in rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/table-web-component/media_1911e5b8846b5e8ba39d5741e40204c2ff1b5852b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toggle-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).","intro-desc":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/toggle-button-web-component/media_13c8e741d00cc39b5b98358d3426fa284fdf7b209.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toast-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299260,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/toast-web-component/media_172f6817aaa27ae3ea595e6302864c5122b62c5bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/time-picker/media_1cb3c9964cc18dcc1b31df62b17617a7e6e560b97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299260,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/tile/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/tree/media_1c428ab6c8f9d62ace9804f3fc9ddddd74cff713d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1777299276,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The formatted text control displays HTML text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1d0a8ee2910336d169aeadcec159bbf4df86dd2c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1782338170,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree-web-component","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1782338169,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Trees provide a way to display and work with basic                     hierarchical data. They offer a clear representation of                     structured information and are typically used in the main                     list for list-detail scenarios, popovers, or dialogs.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1782338190,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1777299276,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_132d895926ab9026ec9bcb14de3cb3d1ad15168f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-date-range/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299276,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There’s now a dedicated dynamic date range component with a new guideline page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/dynamic-date-range/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1782338187,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-date-range","title":"Dynamic Date","version":"","breadcrumbs":"","lastModified":1782338186,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.108.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299275,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard tree item (ui5-tree-item) is the simplest type of tree item. It provides the most common features, such as text, icon, and a checkbox ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/tree-web-component/media_1402704752a91f40ad38829e1c937038c77d08676.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/flag-and-favorite/media_165a342b5a1cd4e8caa1f2056ffea6b211160c6f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","intro-desc":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/value-help-dialog/media_1fd34221a75309df9689cb0b23e9f9ca8a59fbd70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/tree-table/media_12c2920fb57e11f0b4a2d61dda3a3659f389b340b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1782338170,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/p13n-dialog-popup","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1777299290,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_194bc70d4eb39a78b4321a74a596469a9e5aaf60f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1777299291,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_139f0673721fc998be3c3394ec581b8d3bb3a3b60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1782338171,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page, or in the header of an object page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1782338169,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/illustrated-message","title":"Illustrated Message","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1782338169,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1777299291,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_15b11bb6a0f5f9906f39f1c6b5c6e23301854b5b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/html","title":"HTML","version":"","breadcrumbs":"UI Elements / HTML","lastModified":1782338171,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be ...","intro-desc":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page, or in the header of an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/message-strip/media_17fb925ce0da4ca075e7b043b0d9d85d028baed2e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/html/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise ...","intro-desc":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/html/media_19b84bf34545fee97d63137d2ec1147dc6fa299fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/formatted-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299289,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"By default, the control uses the standard font and headlines. It supports the following HTML tags:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/formatted-text/media_1ad302b9081d3eac381c9202963c8e33714f082fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/token/media_194faf9acf24d104d55a905e852105a56e8d2c817.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/p13n-dialog-popup/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/p13n-dialog-popup/media_151c7773aec722459550cdf5e511017c2c3bfe25e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/illustrated-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299290,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/illustrated-message/media_1cff33d03262dd17f4232c7831aabcd498957404d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/table-personalization-dialog/media_1c7b4b60cb1988ecc718fe3a83fc476697cc1dbee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree-toolbar","title":"Tree Toolbar","version":"","breadcrumbs":"UI Elements / Tree Toolbar","lastModified":1777299304,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The tree toolbar always appears above a tree or tree table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_14c69202217ac0c22d00b624861f8437f247a4e51.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1777299305,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1b03b5d66339f5be27f1d0cd6dd483ddbdf4e3da8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1777299305,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1a04121bc30e895d4c592eb53e453df64f1dcd5d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/upload-set","title":"Upload Set","version":"","breadcrumbs":"UI Elements / Upload Set","lastModified":1777299305,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_190988245222535843d9b13a767ba59fa138dca02.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777299306,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_17f216b89aff0cd8c5f23a03026e93560724c041e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1777299305,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1923dbdc763deedfff4b08951b3d5ca855e63c934.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1777299305,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_126fc875b4d9441c69c3bfa3196c1c570e5d455b9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299305,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/action-list-item/media_1f192edd5b50c31f8c7a4a2fffe9904a0e1ffa061.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777299306,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_12ae6343e60ce4d2476cd51313af9be064b7aa666.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit ...","intro-desc":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/breadcrumb/media_16013b09ed8605a8e6769a2e6460930102375627e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299306,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Examples of a user image, user initials, and standard user placeholder icon","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/avatar/media_15102b7539cf535c7971b973554d91d3144c1b110.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons ...","intro-desc":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/view-settings-dialog/media_18ac0065e367d3ffa15c71931aba77594965c8a3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/upload-set/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/upload-set/media_16d061e11791583c3ad20e04b2dea6d5b1a055111.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/tree-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","intro-desc":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/tree-toolbar/media_13c16b182e7d7732de73a72320704c8c0f55e4f41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1777299320,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1977181d19a7a94847955e24ac98332dcb2ab6704.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe","title":"chart-vizframe","version":"","breadcrumbs":"","lastModified":1777299321,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar","title":"calendar","version":"","breadcrumbs":"","lastModified":1777299320,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type","lastModified":1777299322,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it's crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_19aaeb7fb71e579c1fb65563e213112ebbbe6169d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1777299320,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1f56d58bb148b3d6da9be7771b4fa25290abf15d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1782338179,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Semantic Patterns","lastModified":1777299321,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_17ea7ae7794e4c4d22eed1ba4adbc89e6df41d114.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar-card","title":"Calendar Card","version":"","breadcrumbs":"UI Elements / Calendar Card","lastModified":1777299321,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1eac993b6e1a1935bb1ab18357493182da0f90f78.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Popover","lastModified":1777299321,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The chart popover displays information or actions related to the selected data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_19ca9b15c3785c183a6484ef5b730bc9943317841.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1777299320,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_18f051784aa3605f6e3af0fd8ad72e66f5166d594.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1777299321,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval control displays a range of days in a single row, saving on horizontal space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1418c5bb245b800c8ca3aacd65839c15915243cd8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/busy-state/media_16e30becd2841a8bbdbde30b01be18525b9b85a84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/busydialog/media_13aa5ff9f7de0c020ee6a30a41f3be54ff221703b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.","intro-desc":"A chart popover is used to display information or an action related to the selected data points of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/pop-over/media_1f4435945d3dc5f915f2d8e10bf14e9b0546b54be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar-card/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected ...","intro-desc":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/calendar-card/media_1cf998dde09d9c7b19ba8439e201941eb05d3aae2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299320,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ongoing operation covers only part of a screen that has multiple controls, and:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/busy-indicator/media_1e5850f86967e7aaad8da6fb64fe3b410e2ac3941.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the Previous and Next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/calendar-date-interval/media_1e7d0554823734fa58c69f38f3dada666ed438f7d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, ...","intro-desc":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/calendar/media_1b5dc077d6a4be97ff215f46980530b946997f4f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1777299321,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts. It comes with built-in actions for the table display and personalization.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1b42da34c0ff823e3f62de84f7f372da25ab54849.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1777299321,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Chart types available in VizFrame","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1dfdd6e01f3777b6c79232c808e278af4e5226776.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type","title":"choosing-the-correct-chart-type","version":"","breadcrumbs":"","lastModified":1777299322,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Time Axis","lastModified":1777299321,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1cda229d52f6623987285b35200f9e75e85a422a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Deviation","lastModified":1777299322,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the deviation (difference or variance) between two measures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d90cb315472cd4160e37451219d4b27d05b4ddcd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-value-based-legend","title":"chart-value-based-legend","version":"","breadcrumbs":"","lastModified":1777299322,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/calculation-builder/media_18aec04f8fc16c780b640f8a9488996bc891d0b85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Part to Whole","lastModified":1777299322,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_119bec665a0b300b017f8c5ae26df4bdf6f1f5c7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Comparison","lastModified":1777299322,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_17332c2ebe0065b9e8653a1e0fc809ab49973669a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-types/media_1bf79942bc727d82c713c0b4f74b1da3b54318965.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-toolbar/media_1d836296792fd447472804da0faa5f1369713c4da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Correlation","lastModified":1777299322,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The article explains how to use different charts to visualize the relationship between sets of numerical values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d56079cb733ca1637af1d50ac99bf387b32367a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/values-and-names","title":"Chart – Color Palettes – Values and Names","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes – Values and Names","lastModified":1782338184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page provides all the color names in the chart palettes.Use Names – Do not use HEX values!Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.You cannot change the HEX values unless you create a new theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Embedding","lastModified":1782338184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/color-palettes","title":"Chart – Color Palettes","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes","lastModified":1782338185,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"","lastModified":1782338184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Zoom","lastModified":1782338184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"xThe user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Variation Over Time","lastModified":1777299335,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article illustrates the different ways you can visualize changes of measures through time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_18fd1e5ae95cc0dac8d9d23a36d82fc215e65e34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Selection","lastModified":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes the different ways users can select one or more data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1eb2c60448de4b314876e4f1cac80ed735883fcca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299336,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Range Selector","lastModified":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The range selector is a user interface control that enables the user to select a range of data points in a data set.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1365f96e7784d8d23cc3e608f2ac6f83f44d0ef0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Reference Lines","lastModified":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Add reference lines to highlight a particular value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_198b5389c27836743e942b0ec9485fbf03a7ad53d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1777299337,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_182fa7ad74bd6db4daba2981f58715d04f388739e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1782338185,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Legend","lastModified":1782338184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Ranking","lastModified":1777299335,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to choose the correct chart for ranking items based on numeric values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_198df7305b7fc5050fa8f61ad0a0933907ae75b12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1777299337,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1782338185,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/color-palettes/media_110ae4a44b1ffb64ee40d61435ce0279d39a8b0bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299337,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/color-picker-popover/media_1a848c35dcc69fb71fb037a1ff2ab8d67c4815745.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"","lastModified":1782338080,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"","lastModified":1782338184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/contextual-filter/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299337,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Filtering options are now covered by the filter bar and table toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/contextual-filter/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"The date/time picker allows users to select date and time values in a combined input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/datetime-picker/media_149c67e757203a28f03639e2676d5ca3bfecf02c1.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color names in the chart palettes.","intro-desc":"This page provides all the color names in the chart palettes.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299337,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/display-list-item/media_133b9d5f6374df618a2c60b0e091d9fde05205715.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1777299337,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_19835d963b20571089a1098e3cb48d39bdd5e936f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1782338184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows                     content in the form of labels and text.As forms                     are generally the preferred control for combining labels and                     fields, display list items are seldom used.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299336,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"x","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1782338185,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1782338184,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.If the entries are not validated by the application, users can also enter custom values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Size of the Chart Container","lastModified":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The property \"autoAdjustHeight\" helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1b559114bed77c670f06ad86c970851c850079923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1777299336,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_132a212a1cdd659cd8a4a816cc3e821771e78acef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299337,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/color-picker/media_1b078aaf0dc5403af74c988e35c55cb41c0a2cc5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299337,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/color-palette-popover/media_17b786cf30cdfc76290a350f60b8e26789b48ee14.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Number and Time Format","lastModified":1782338185,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1782338185,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299337,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color palette with 15 colors and just one recent color","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/color-palette/media_12ae77a64ad0711d80f1329dc66dfa8895f089415.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/combo-box/media_18b457f9616bd67c2dac48ec1574a056eab37a024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. ...","intro-desc":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/dynamic-side-content/media_12daa1058e0ed755fb7392a2683ce8c170088a964.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1782338173,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1782338172,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of                     input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1782338174,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed                     enables SAP Jam users to post comments and reply to posts created by other users. You can use it just for                     collaboration, or offer collaboration alongside application-generated content.Like the timeline, the group feed component shows a series of                     entries in chronological order, such as changes to an object, events related to an object, or user-driven updates and                     comments. The latest entry is always on top.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1782338174,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users                     to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card                     number, currency, and IP address).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1782338174,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1782338176,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299352,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mask input extends the input control (sap.m.Input) and has all the normal properties of an input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/generic-mask-input/media_1ecc41657c1842b1b9bb64e71b30f44013c2a7f17.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1782338175,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.The Gantt chart control provides the basis for creating such a Gantt chart and is a generic tool. Applications can consume the control in order to implement their use cases, and if necessary, they may even enhance the control.It consists of three areas: a chart area, a table area, and a global toolbar.Another feature is the option to have a split screen that includes two or more views next to one another, each view consisting of one table and one chart. These views can be arranged vertically or horizontally, and they share a common (global) toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1777299352,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1083775524bad08c6e8cb152ac6bfec12ca893379.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1782338175,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/invisible-message","title":"Invisible Message","version":"","breadcrumbs":"UI Elements / Invisible Message","lastModified":1782338173,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into ...","intro-desc":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/image/media_16451af95fa2d40b83226fc5eb72c93be6114bf58.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299353,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A label is the name or title of a control or group of related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/label/media_1a0ba7b427c7b4049585c99851c6394c2d0a22266.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/expandable-text","title":"Expandable Text","version":"","breadcrumbs":"UI Elements / Expandable Text","lastModified":1782338172,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1782338176,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.In SAPUI5, forms can be built using two different controls:                     Form – sap.ui.layout.form.Form (API)                     Simple form – sap.ui.layout.form.SimpleForm (API) With a form, you can easily layout a list of properties and input fields. A form is structured into form containers. Each form container consists of form elements. And each form element consists of a label and an input field.The simple form control gives you the possibility to achieve the same result as with the form control, but in a much easier way. Inside a simple form, a form control is created along with its form containers and form elements:                     The layout and structure are defined by the content that is entered.                     Form containers and form elements are created automatically according to the content type.                     A title (sap.ui.core.Title (API)) automatically starts a new form group (form container), and a label (sap.m.Label (API)) automatically starts a new row (form element). All other controls following this label will be assigned to its row (form element).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/expandable-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or ...","intro-desc":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/expandable-text/media_17ad853611798a7462651553678bb2b08898ff395.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1782338174,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of related controls.Every field needs a label. If you use one label for a group of fields, use a combined label and invisible text to label the single fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/invisible-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users ...","intro-desc":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/invisible-message/media_18eac0c5b4fddcdd03feeccd307d69481b64d77d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/feedinput/media_11b7a529fcc4ef4db57e1f2259811def5acfc7da4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1782338174,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1782338175,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/invisible-text/media_1bb653aeb0da45903951b29fa321db56586b9f21c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/gantt-chart/media_182607306f0ec9c8750541a3ff9cd5c21c5bc4a94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable ...","intro-desc":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/multi-combobox/media_10d500acaab4c158d56c651bf63a146324fb473a1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299353,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/input-list-item/media_1eaaeaa0a5452a278606c9e19135caa52112785c7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299352,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation ...","intro-desc":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/icontabbar/media_13a1e737768ab81e4f53ccbfad8dad52a1207ea86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to ...","intro-desc":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/message-view/media_1e0a1dd474125e4da01a47048011f5df39810a178.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/form/media_1d63a4170d01a5c0934425974c4c1e1e0075d3323.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1782338181,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.                     The smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/placeholder-loading","title":"Placeholder Loading","version":"","breadcrumbs":"UI Elements / Placeholder Loading","lastModified":1777299386,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_10be93ad85f14bc84d1b8c30009d0586b16ca7f09.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-form","title":"Smart Form","version":"","breadcrumbs":"UI Elements / Smart Form","lastModified":1782338180,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1777299386,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the process flow control to represent the stages in a business process (such as approval).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1034d643556c0d7a392ffff83a7d7b05bac922de2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1777299388,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1e23225dabddd022a02bbfcbdbfb7f7b30c089430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777299386,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the rating indicator to let users rate content, or to display a content rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1cde5b70b486f81f2e2fede5e8df39a8c9daa1300.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/scroll-container","title":"Scroll Container","version":"","breadcrumbs":"UI Elements / Scroll Container","lastModified":1777299387,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The scroll container is an empty area that can be filled with content, such as other UI elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1bf0e645420f6063517459b6231104ce33d7be50e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-list","title":"Smart List","version":"","breadcrumbs":"UI Elements / Smart List","lastModified":1782338182,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the smart list control to create lists or trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1777299387,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The search field enables users to search for information or filter data by entering key words as text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c2e40222c3b1f486b1dfc7d0164c86027b1cf8e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1777299386,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF Viewer control enables PDF documents to be displayed, printed and downloaded within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_196b8ce547996f5ecc1f1a73c8ac39e37a7b0a989.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1777299387,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor is a text input control that lets users format the text and insert different types of elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_16177af901fdc26a4940ef75064698a54573136e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1777299387,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1737abaf8277cf86d9c369167e3241877397a3003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/scroll-container/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","intro-desc":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/scroll-container/media_1685d43a2e70460d15841eee27d8a56c3ad9d4b3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/placeholder-loading/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. ...","intro-desc":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/placeholder-loading/media_13175ff2e20060d41ef72d9cee92b3f257f4ad589.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299388,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the text control if you want to display text inside a form, table, or any other content area. Do not use the text control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/text/media_17a6a4d7d9ecbe3b0185343536e6e9dd8316ba336.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and ...","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/smart-link/media_1fc9217782813e0c2c8c06bfd76d6a37237929542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1782338180,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.When triggered by the business application, the output control collects and validates all output parameters, creates the output documents, and outputs them. The possible output parameters handled include what to output, for whom, when, and through which medium.A simple use case is: you choose to email an output document to your customer based on an available form template. The system records the date the output was created, and indicates that the output has been sent.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1777299388,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1d0daf335006e27ca534061c8966172506d8c7270.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the smart list control to create lists or trees.","intro-desc":"You can use the smart list control to create lists or trees.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/smart-list/media_1b94ab65835677a74e9c0e573b679b916946adf82.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/pdf-viewer/media_1bfa25b86afee6191679c8e74904e96c327bba1db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1777299387,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_16b8bc930daf6b444cb9f3d2f7f3faf7241508581.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1777299388,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1be78841a819a454cfd25ae304e7cf888836b938d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1782338180,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally                     contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299387,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/search/media_173c464bcffb8da1ceed059355bddeceb7346eae8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"The step input control allows the user to change the input values in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/step-input/media_18fcd8cfe88652ecff8cd8666dbc7f9da7138c9b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1782338183,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.T accounts are usually clustered together, so the accountants can analyze how individual line items from different journal entries affect the ledger balances.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/rating-indicator/media_16ac117ff61db9722b4ab3dcbcdaf33f3133fb33d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299388,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/status-indicator/media_1204bd3d1e927fceef6f0f4c80ec470ebbd23a39d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-form/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for ...","intro-desc":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/smart-form/media_148f43ae8402e44ccb124c8141019c1cb70ae4d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/process-flow/media_1b3b1b8be78eb186eac11e2b1d70bdf40ae708923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/rich-text-editor/media_10c6fbe2398260def9ecf37662212e23e42d808bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control ...","intro-desc":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/output-management/media_147f032d680639911c698dfb0a49783e2d38b6027.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/table-select-dialog/media_1429c80d6a6fc0224079b28b3d48696966ec64bea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299387,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item can consist of the following parts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/standard-list-item/media_11d242e77027bb4f0313ea57e7008f1a7d06be968.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/select/media_14f87bdc64bc20d6b1ebe6f4ec6457eb42ef2d9d0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1777299402,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_121a704525f8ecb7569902864a322e763fca4e245.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/barcode-scanning-mobile-integration","title":"barcode-scanning-mobile-integration","version":"","breadcrumbs":"","lastModified":1777299404,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar-group","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1777299403,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays a set of avatars that represent people.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_18d9d3b2859970a6d07f62467fe37a753914a5003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1782338180,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.This article gives an overview of what kind of different toolbars exist and when to use which one.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1782338180,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1777299403,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_18adc4130bbed88d5181c14d1be4fc12b73caaa66.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/translation-of-textual-user-input","title":"Translatable User Input","version":"","breadcrumbs":"UI Elements / Translatable User Input","lastModified":1782338181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business                     objects may need to support textual input to be                     translatable into several languages. The use cases for                     translations of texts might be very specific to the                     application context. This guideline will define a pattern                     for a general use case. If your use case differs, use this                     pattern as the basis and adapt it as necessary.The key features of this pattern are:                     The initial maintenance of an object and its translation                     are separate steps. Therefore the maintenance screen of the                     object (in many cases the object page) will accept any textual input in the login language.                     The translation of the textual input is a separate                     (follow up) step. It is done in a separate pop-over dialog                     focusing solely on the translation task.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1777299404,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel is a control for browsing through a set of items one item at a time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_17bb56bc06426d3f63c66a9976ce763e9c80645f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1782338179,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.The title is used, for example, by panel, toolbar, or list components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"","lastModified":1782338093,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/generic-tag/media_1587875b87665528a3047fdb684f14cb8ff9911bd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299403,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/translation-of-textual-user-input/media_14ed9bfa5c8f88c852b17f41ec904a9d983dcd3fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299403,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1782338180,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1782338182,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.A common use case is to provide information about changes to an object, or events related to an object. These entries can be added manually or generated by the system (for example, value XY changed from A to B). The latest entry is always on top.Another use case is a feed that is driven by user updates and comments. This feed can also be entirely devoid of machine-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"The text area is an input control that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/text-area/media_14a067e78bf2b63cd367568fe51aaa65afabe88b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/carousel/media_1dc2820fc95aafa66306509643071ad960bfab90f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/barcode-scanning-mobile-integration/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/barcode-scanning-mobile-integration/media_1af908aa391d2b095e466808e24e2c11b6d22cff4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/upload-collection/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299403,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection component has been replaced by the new upload set component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/upload-collection/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/menu-button/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299405,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The individual button guidelines have been consolidated in one button guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/menu-button/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/variant-management","title":"Views (Variant Management)","version":"","breadcrumbs":"UI Elements / Views (Variant Management)","lastModified":1782338179,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.The variant management control enables the user to load, save, change, and maintain variants.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1782338181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/avatar-group/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299403,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The group type displays overlapping avatars. Use this type if it’s important to display the sum of people at first sight, rather than the individuals. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/avatar-group/media_19bb9eb22bed3e7c10d622a366257f769572da1f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/toolbar-overview/media_10f9a05ba1d8be44b0e3a449cf45f9e709644c72f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/footer-toolbar/media_12a3f22e888af82d7f02d0156be07146fe923ea87.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak ...","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/variant-management/media_16e7eb31b3d9c6b01aa2f8f3e07f13e4a7f492129.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/timeline/media_1a5870b3ba47daf14588a43ad372c6e5d2aed4c0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"UI Elements / Smart Filter Bar","lastModified":1782338179,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).The developer can use annotation properties in the classes ControlConfigurationControlConfiguration and GroupConfigurationGroupConfiguration to adapt the filter bar for the purposes of the app.These annotations let you:                     Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)                     Enable the autocomplete suggestions feature                     Enable the value help dialog                     Overwrite settings from the OData service                     Set custom filter groups                     Add custom fields                     Access all settings for the underlying filter bar                     You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1782338179,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize                     the state of individual items in a linear workflow. You                     can embed it into a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777299419,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1363874a3f73836f5da6cce0ced88d37e0f0c0122.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777299420,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator shows the current completion status for a business process (static value).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_16b4a24f2f8fd91beef9a8e9a8702d0c6c1f4c1d8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777299420,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_147c4d25afa4cd891d6a5f00e0cd4cfb97dddd3a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1782338180,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.Visual filter bar - Size L","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1777299420,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The range slider enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c64ea70b0eec6e0b70495400cd2b78f5a690d732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1782338178,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299419,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/panel/media_15b8575da3aad93947366e9c9566a844968c490e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"A slider is a control that enables the user to adjust single values within a specified numerical range.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/slider/media_1e7452b990d893329fb385c25c0afcd94cc5c25dc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","intro-desc":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/range-slider/media_13f5fb9c32b7956325c2620553ac51543f92e4042.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/radio-button/media_10b58c1999bcb2bbf955c325404068bc614bee611.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color ...","intro-desc":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/progress-indicator/media_13042cf0dc50209899b709f01d3c1f135c13ed11b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299419,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The default steps can be replaced by other controls. The following controls are supported:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/micro-process-flow/media_16ad4ea12ff054ea17f03587aa63bf439f3633207.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/smart-filter-bar-annotations/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299421,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/smart-filter-bar-annotations/media_10b3bb212111088c2766c6dfcf7de3de41d88c661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/visual-filter-bar/media_17835f9f64b09f168012cae34805aaba4d6ec00b0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782338181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is                     connected to an object and displays a certain type of                     information (status, identifier, number, marker).                     Object status: a short text that represents the semantic status of an object                     Object identifier: a short text that represents the key identifier of an object                     Object number: a short text that represents the numeric                     (key) attribute of an object and its unit                     Object marker: indicates the technical status of an object","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1777299370,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_17a4d74f7eb157d90bbef713c5dec90808d31f0ff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1782338182,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299370,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item’s text sizes are limited due to truncation. The title wraps once and truncates after two lines. The key attribute also truncates ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/object-list-item/media_1f45470c7866e6bf8083da18bf1c214a3a08ea800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1782338179,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299370,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/object-display-elements/media_1d5e293aa90a85990cd3e79fbc23bdae9e037287e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has ...","intro-desc":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/notification-center/media_1c8ee29e0757c7fd4ee733773ccc31da90eb1382e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can ...","intro-desc":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/multiinput/media_17d4827979432d36522e8b755a880e7a483d3ef85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1e2cd72b19bb1b0af44f2ebc94d9754bc7b6e27ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1782338181,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter by categorical data. Depending on how the data is sorted, this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_146e56fe94d51d0b6d6894f5ca69e0a3cc9d998c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1782338173,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart, which provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_138288a10e29da6edc421acac87be684e05429910.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/treemap-chart/media_102283bffb453f5cb670e066ed8adf38f014ef22f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299434,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are three switch types: basic, semantic, and with optional text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/switch/media_1c4cad438673e7e8c95747f46022eec2e0114524d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299433,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/area-micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1782338085,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299433,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1782338175,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1777299433,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1edd7bc7cfe6abde044176cb5b48a54486064b031.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1782338175,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1782338173,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.Users define the business logic in a decision table, which includes:                     One or more conditions                     The results that are returned after evaluating the conditions","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777299434,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1782338041,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1782338172,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1782338173,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter large sets of data by time period. The user can see both the time period and the measure at the same time, where the period is always the horizontal (X) axis of the chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1782338041,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299433,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1782338173,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1782338172,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).The interactive donut chart allows the user to filter by parts of a whole – depending on the sorting this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1782338183,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.You can put the VizFrame control inside the ChartContainer SAPUI5 control. This enables you to place a toolbar above the chart which gives users the ability to switch between a chart view and a table view, as well as switch to full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1782338183,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777299434,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1782338173,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1782338183,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1782338172,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.The line micro chart supports up to three lines, but we recommend using only one. You can modify the color of each line using the qualitative color palette or semantic patterns for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1782338172,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.There are three main ways to visualize a column micro chart: View with top labels for start and end values, and bottom labels for start and end dates                     Detail view with labels for each vertical bar. This view can be used only if there is enough space for enough bars width in the container.                     No labels. In all cases, the label can be switched off. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1782338182,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the radial micro chart to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1007e89d89f41eaf1ceeca5ceace06bb189984661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1782338172,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows                     users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1782338181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.Examples","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-120/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-120/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777300055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/get-started","title":"get-started","version":"","breadcrumbs":"","lastModified":1777300055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products","title":"sap-products","version":"","breadcrumbs":"","lastModified":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1782337688,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1782337687,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Intercultural UX – Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural UX – Environment","lastModified":1782337688,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and ...","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1777300055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1782337684,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1782337688,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and ...","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1782337687,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or ...","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1782337686,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, ...","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/analytical-list-page-overview-page-sap-fiori-elements-2","title":"Analytical List Page / Overview Page","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Analytical List Page / Overview Page","lastModified":1782337682,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates. Consequently, you can find the information for all ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page","title":"object-page","version":"","breadcrumbs":"","lastModified":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements","lastModified":1782337684,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen ...","intro-desc":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen from scratch, you assemble an app from standardized pages that are automatically filled with your business data and actions. The result is a consistent, responsive, and accessible UX that follows SAP Fiori guidelines with far less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report","title":"list-report","version":"","breadcrumbs":"","lastModified":1777300053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1782337719,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/integration-of-classic-sap-uis-sap-fiori-elements-list-report","title":"Integration of Classic SAP UIs (SAP Fiori Elements List Report)","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Integration of Classic SAP UIs (SAP Fiori Elements List Report)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some ...","intro-desc":"This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some or all of these actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/media_137a3107e4949629e0dbac7627abd70d05f747730.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/terminology-sap-fiori-elements","title":"Terminology for SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Terminology for SAP Fiori Elements","lastModified":1782337684,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help you better communicate with application developers, this article presents:","intro-desc":"To help you better communicate with application developers, this article presents:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe ...","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/media_1ec9991d1adc6d26c349fbdfe17a171c1c93dc1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze ...","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/analytical-frameworks/media_13c0a32cf660ff94271312170ee2634f9f375c3b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/list-sap-fiori-elements","title":"List","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / List","lastModified":1782337683,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","intro-desc":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/object-page-content-area-sap-fiori-elements","title":"Object Page – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/media_1ccb42ff0eec5f3d2f1a172d254ff622dcc0dea5d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/product-standards/ux-consistency","title":"UX Consistency","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / UX Consistency","lastModified":1782337688,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","intro-desc":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1782337689,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section outlines the foundations of the SAP Design System for web applications.","intro-desc":"This section outlines the foundations of the SAP Design System for web applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with ...","intro-desc":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/media_1ae5c2959796dec30e438debe112eb27b08d113ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/tables-toolbar","title":"Table Toolbar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Toolbar","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/media_104a4cc90b3026bd75b11042940583fa5b5548916.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/best-practices-for-designing-sap-fiori-apps","title":"Best Practices for Designing SAP Fiori Apps","version":"","breadcrumbs":"Discover / Get Started / Best Practices for Designing SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you ...","intro-desc":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/media_1b27db6dd4b6c0eec3b05bd02699ba8e86b44bd1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/object-page-header-sap-fiori-elements","title":"Object Page – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Header","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/media_1648e6371a26398f6fbedc294b5e47e67b4599684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/worklist-sap-fiori-elements","title":"Worklist","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Worklist","lastModified":1782337682,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report ...","intro-desc":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/object-page-overview-sap-fiori-elements","title":"Object Page – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/media_11879afb5016a5c21545daaa3db32d9dc5be78357.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/list-report-header-sap-fiori-elements","title":"List Report – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Header","lastModified":1782337720,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","intro-desc":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1782337688,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108","title":"v1-108","version":"","breadcrumbs":"","lastModified":1777300053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/table-types-sap-fiori-elements","title":"Table Types","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types","lastModified":1782337684,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/sap-fiori","title":"SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / SAP Fiori","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of ...","intro-desc":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/media_10203c9efe37f765d5bb8f8adc8bcedfee57c6818.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/situation-handling","title":"Situation Handling","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve ...","intro-desc":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve the situation by gathering all relevant information and proposing solutions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/media_1e8f9d4420c40c8e895d76b722653bc51ba327f58.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784263031,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral ...","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/list-report-content-area-fiori-elements","title":"List Report – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","intro-desc":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/list-report/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines","title":"Designing Intelligent Systems – Guidelines","version":"","breadcrumbs":"Foundations / AI and Joule Design / Designing Intelligent Systems – Guidelines","lastModified":1782337691,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to establish a feedback loop in intelligent systems.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1782337685,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/table-features-sap-fiori-elements","title":"Table Features","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Features","lastModified":1782337720,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for a table detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for a table detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/object-page-footer-bar-sap-fiori-elements","title":"Object Page – Footer Bar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Footer Bar","lastModified":1782337682,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1777300055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists","title":"tables-and-lists","version":"","breadcrumbs":"","lastModified":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Cultural Differences in Needs and Behavior","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Cultural Differences in Needs and Behavior","lastModified":1782337688,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects ...","intro-desc":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects may include socio-cultural norms and conditions; beliefs; attitudes to responsibility and taking the initiative; established practices; demographics; and trends in technology. They may also have an impact on design decisions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design","title":"Designing Intelligent Systems","version":"","breadcrumbs":"Foundations / Designing Intelligent Systems","lastModified":1782337691,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/whats-new","title":"What’s New in Guideline Version 2.08 (1.108)","version":"","breadcrumbs":"Discover / What’s New in Guideline Version 2.08 (1.108)","lastModified":1782337719,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 2.08 (SAPUI5 version 1.108).","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 2.08 (SAPUI5 version 1.108).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1782337684,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only","title":"sap-s4hana-only","version":"","breadcrumbs":"","lastModified":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover","title":"discover","version":"","breadcrumbs":"","lastModified":1777300053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/table-rows-sap-fiori-elements-2","title":"Table Rows","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Rows","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/tables-and-lists/media_1dde84737c302b10c68c74bb7229476ffb54d82d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/versioning","title":"SAP Fiori for Web – Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1782337719,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/get-started/ui-elements-overview","title":"UI Elements","version":"","breadcrumbs":"Discover / Get Started / UI Elements","lastModified":1782337685,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the UI elements used in SAP Fiori. UI elements range from simple controls to complex controls, and include reuse ...","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1782337684,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","intro-desc":"[external_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/smart-templates","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements","lastModified":1777300055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/frameworks/sap-fiori-elements/media_173bb1ea449965ba698931a78c73ab276b000cc5b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1782337688,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Culture, as we understand it, follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home","title":"SAP S/4HANA Product Home Page – My Home","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Product Home Page – My Home","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP S/4HANA product home page is an alternative to the SAP Fiori My Home page when using SAP S/4HANA Cloud. Whereas the previously available ...","intro-desc":"The SAP S/4HANA product home page is an alternative to the SAP Fiori My Home page when using SAP S/4HANA Cloud. Whereas the previously available SAP Fiori My Home page is the entry point to a personalized set of apps, presented as tiles or links, the SAP S/4HANA product home page orchestrates much more information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/media_1a78987550d35bc9a064f81374f9f59773970a710.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent ...","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"Business Roles and Tasks","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Business Roles and Tasks","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for mapping a business role to SAP Fiori, including:","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/discover/sap-products/sap-s4hana-only/media_12a7af32dcdde6d1dc193a9433388fe94cfb79fce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/explainable-ai","title":"Explainable AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of ...","intro-desc":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of an algorithm. This is even more critical in business applications, where users are held accountable for the decisions they make.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/media_1168ad1270482479ce4fa0d4a290ea4dc295be08e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777300073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"Foundations / Best Practices","lastModified":1782337704,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1782337702,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1782337704,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Object Handling – Partial Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Partial Edit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_151176540ca66a2118dae22b47e68ef45b94f4f55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Object Handling – Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_18613303bfe2a1150661fb1e7e7277403519fcba6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777300074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/overview","title":"Designing Intelligent Systems – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / Designing Intelligent Systems – Overview","lastModified":1782337681,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782337793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782337793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1782337702,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Simple Objects (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Simple Objects (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows ...","intro-desc":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_1a1cc118fe7262666a86d6ce90117d257b1581cc7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/designing-for-empty-states","title":"Empty States","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Empty States","lastModified":1777300073,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"Live","description":"Empty states are moments in the user experience when there is no content to display. They can appear anywhere within an application and occur most ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/media_1d5dcad835a7bb4d9babb1eda8bf2e08811bd7441.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1777300074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1777300074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/media_1f49304e3714d72ea4dceed1442cd7eb1d81361b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/ranking","title":"Ranking","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Ranking","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Ranking simplifies complex decisions for business users by showing the best options first.","intro-desc":"Ranking simplifies complex decisions for business users by showing the best options first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/media_17802c166b7e4b6ac057feff2e5f92f82e285265d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization can be used to modify the display and settings of a table.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/tables/media_148972a96b93f46542626688003fc01290f86c781.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Object Handling (Create, Edit, Delete)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In addition to the basic display option, the following actions are available for objects:","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777300073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/feedback-loop-in-intelligent-systems","title":"User Feedback","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / User Feedback","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In the context of intelligent systems, “user feedback” refers to the process of collecting, interpreting, and integrating user feedback into the system to improve the ...","intro-desc":"In the context of intelligent systems, “user feedback” refers to the process of collecting, interpreting, and integrating user feedback into the system to improve the intelligence and the results.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/media_1848cf8acc4dbf67a1d0dfe9a54875ad05997f0e9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But ...","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/messaging/media_139884682f4371430549515bb250c4886df56dc47.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/copy","title":"Object Handling – Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Copy","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_19c2b382122892c2af0945dd02aeb09a4cc5f41a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Mass Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Mass Edit","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","intro-desc":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_1882138d3f9c25bf3fb26ee3a7984f13022fa8769.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/recommendations","title":"Recommendations","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Recommendations","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of ...","intro-desc":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of a recommendation pattern and its impact on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/media_1e8ddcce56382a57087a5cb9f95aede02449e1145.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/delete-objects","title":"Object Handling – Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the ...","intro-desc":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the items depends on the structure of the object (simple or complex).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_1420ac552e13b7b375167d6c0dc74f30370306117.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level ...","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/media_16f99fa6efcbe276c93111f8e44bafa685a0292cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1777300074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/media_1dd38bfc64a884844c90532d7384523cda110c084.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Complex Objects – Global Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Global Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","intro-desc":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_107badff44f210450a3174b27162b1185cbeb4ef7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/overview/designing-intelligent-systems","title":"Designing Intelligent Systems","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing Intelligent Systems","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The concepts for designing intelligent systems are still evolving. As we gain further insights from users and app teams, we’ll continue to refine and enhance ...","intro-desc":"This section covers the design concepts for intelligent business systems and machine learning in SAP business software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/overview/media_196fd67266d0e616f12adfe04a08c39cfea9a7867.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Forward / Forward","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you ...","intro-desc":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you can forward one or several objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_15638fe19ef863496cb353f926e41feaab9026da2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain ...","intro-desc":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/tables/media_1c588f5f722cd67d763473ae554b76e25ddb439ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/matching","title":"Matching","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Matching","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The ...","intro-desc":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The system presents one or more strategies for linking similar objects, and indicates the quality of each strategy. Users then only need to approve or reject the suggestions, or adjust them to their needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/ai-and-joule-design/guidelines/media_12416838ad91b023b9bda7657601f468d18982632.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Complex Objects – Local Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Local Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","intro-desc":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_1c8c74db63ff7c7cbca5347151b48e2aadd70407e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation ...","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/navigation/media_1e93ccccc2b283d2a243d359a6999c48eb4e66169.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1777300075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/media_1380d05378bd5264023e6fc84e6076138ccf9a380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be ...","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","intro-desc":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/global-patterns/object-handling/media_14824efef9dca768e282b67d962819d953809c925.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual","title":"visual","version":"","breadcrumbs":"","lastModified":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services","title":"integration-and-services","version":"","breadcrumbs":"","lastModified":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1782337694,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1782337694,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In general, use long text to display units of measurements, and do not use abbreviations, such as (ISO) codes.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1782337691,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1782337695,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data ...","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage leading and trailing white space (blanks) when copying and pasting text into input controls (such as input fields, text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/media_1c3891164147b26d35d90c36cd06324f775f90cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-my-home","title":"SAP Fiori Launchpad “My Home”","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad “My Home”","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a ...","intro-desc":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_153f77eff06072cef783df71456d92d13520fa096.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Which Selection Control Should I Use?","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Which Selection Control Should I Use?","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support ...","intro-desc":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support dedicated use cases. This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/media_1fbf5806ea6a90aa61abe81230bd18da77eedbf54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder allows you to browse all SAP Fiori, SAP GUI, and Web Dynpro ABAP apps in one place. It is available in the ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_13ba1291ffd940838846eceac47655f24ccc9df23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/media_108541462ce9e30919b7314c39a25f4645d7be76f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and ...","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording","title":"Writing and Wording","version":"","breadcrumbs":"Foundations / Writing and Wording","lastModified":1782337693,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported ...","intro-desc":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported in the same way: interaction with a mouse and keyboard as well as by touch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_181991c8bd8f95f41457f4f175f559c5b8c3f9bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"","lastModified":1782337776,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772 and Sunset of the SAP Fiori Client.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"SAP Fiori Launchpad – Merged Header","version":"","breadcrumbs":"","lastModified":1782337777,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1782337697,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance ...","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1782337696,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-spaces","title":"SAP Fiori Launchpad Spaces","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Spaces","lastModified":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_16f72ac0248bab2c56af202e3d0551b6e21b6d631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/ux-illustrations","title":"UX Illustrations","version":"","breadcrumbs":"Foundations / Visual / UX Illustrations","lastModified":1779893363,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"UX illustrations are visual elements that can be paired with written messages. You can use UX illustrations to:","intro-desc":"UX illustrations are visual elements that can be paired with written messages. You can use UX illustrations to:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_196b57e2bef5b13b35019cffa202f37945f66c34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1782337694,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1777300093,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After entering a search term, users can trigger the search by pressing ENTER, by clicking the magnifier icon, or by selecting one of the suggestions. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_1c99516cb73d573ee3cd8b163bcfac119b8bf85a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1777300093,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad home page is the first page that users see after they have signed in. It is the main entry point to ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_16dc3be2f9443e29d0ed0116bec26f5abcfe32481.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/typography/typography-horizon","title":"Typography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Horizon","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/iconography/iconography-horizon","title":"Iconography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Horizon","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons have been redesigned for the Horizon visual themes with a fresh, friendly, yet bolder style that is consistent in terms of size, stroke, ...","intro-desc":"SAP icons have been redesigned for the Horizon visual themes with a fresh, friendly, yet bolder style that is consistent in terms of size, stroke, and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/iconography/media_19cc71d889c93e3b6b83ccb42533f4ff3c2060950.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/typography","title":"typography","version":"","breadcrumbs":"","lastModified":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/colors/quartz-dark-colors","title":"Quartz Dark Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Dark Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/colors/media_14502ab4f6d1a3687f67f65a2395e4672020106de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/analytical-list-page","title":"Analytical List Page","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page","lastModified":1782337778,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"Analytical list pageThe analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, and to act on transactional content. All this can be done seamlessly within one page. The purpose of the analytical list page is to identify interesting areas within datasets or significant single instances using data visualization and business intelligence.Visualizations help users to recognize facts and situations, and reduce the number of interaction steps needed to gain insights or to identify significant single instances. Chart visualization increases the joy of use, and enables users to spot relevant data more quickly.The main target group are users who work on transactional content. They benefit from fully transparent business object data and direct access to business actions. In addition, they have access to analytical views and functions without having to switch between systems. These include KPIs, a visual filter where filter values are enriched by measures and visualizations, and a combined table/chart view with drill-in capabilities (hybrid view). Users can interact with the chart to dig deep into the data. The visualization enables them to identify spikes, deviations and abnormalities more quickly, and to take appropriate action right away.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/colors/morning-horizon","title":"Morning Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Morning Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. ...","intro-desc":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/colors/media_1a3f13591278075c4a8d5b2dcddd2db222eb28b65.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1782337721,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the ...","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/integration-and-services/sap-fiori-launchpad/media_130348e70d783a65fed4991372085a7fd06ba1142.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/typography/typography","title":"Typography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is an alternative theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, ...","intro-desc":"Quartz Light is an alternative theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations","lastModified":1782337696,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different application themes and how they support accessibility standards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types","title":"page-types","version":"","breadcrumbs":"","lastModified":1777300093,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/iconography/icons","title":"Iconography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Quartz","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored ...","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/iconography/media_11d9d449f052b4f87fbbb2871ec6f63b4a6e3e76c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1782337692,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/theming","title":"Theming","version":"","breadcrumbs":"Foundations / Visual / Theming","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also ...","intro-desc":"The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also Quartz Light, Quartz Dark and the accessibility themes High-Contrast Black (HCB) and High-Contrast White (HCW).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_1a45413ea46ccff86dd6b5add932ebb90eca1d89a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782337784,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1782337777,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans","title":"floorplans","version":"","breadcrumbs":"","lastModified":1777300093,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/situation-handling-framework-ui-text-guidelines","title":"Situation Handling Framework – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Situation Handling Framework – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline applies for the standard situation templates in the SAP S/4HANA Situation Handling framework. For each standard template, you need to define the following ...","intro-desc":"This guideline applies for the standard situation templates in the SAP S/4HANA Situation Handling framework. For each standard template, you need to define the following texts for key users and end users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/media_17b335e09aa21b896c48f1d65fa0f52b41d2023fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"Foundations / Visual / Motion Design","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time ...","intro-desc":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time dimension that makes it an ideal medium for storytelling. In the context of SAP Fiori, motion design and microinteractions work together to provide our users with a coherent user experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/media_1199a7a4e3bf13956d83bc9a1de308a26ae1b2579.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page","title":"Overview Page","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page","lastModified":1782337784,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, and view, filter, and react to                     information quickly.Each task or topic is represented by a card (or content container). The overview page acts as a UI framework for organizing multiple cards                     on a single page.The overview page is based on SAP Fiori elements                     technology, and uses annotated views of app data, meaning that the app content can be tailored to the domain or role. Different types of                     card allow you to visualize information in an attractive and efficient way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/visual/colors/evening-horizon","title":"Evening Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Evening Horizon Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/visual/colors/media_1b96154f01f35e4caeba1e1066a19f50f52baa5ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The sections below describe the guidelines for each of these texts.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/initial-page-floorplan/media_18accd21d30a76f979dbcb4221b039446fa6d1798.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/web-assistant","title":"SAP Companion","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / SAP Companion","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on ...","intro-desc":"SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on top of the current application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/media_13bfab4ae6bcc6c39aefca7e82ba6f84cb5a034df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1782337776,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the ...","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the list report header and content ...","intro-desc":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_12f7dcc04cb3ac14f958ebc616fdcb31a1037fe0d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/object-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the object page header, content area, ...","intro-desc":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/object-page/media_19019b5693e276244535676c7aae73d9985b87317.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777300094,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page/media_10987990b7b041e44a914b702aa39e51da4b32342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/analytical-list-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1777300094,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/analytical-list-page/media_1bce9986520016e88c27baa7a42d785b45086b71a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/ui-text-guidelines-for-sap-fiori","title":"UI Text Guidelines for SAP Fiori Apps","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Guidelines for SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","intro-desc":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/foundations/writing-and-wording/ux-writing/media_1486c8bc4172f44b723e46d4bf6bf48bcf765c128.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/libraries","title":"libraries","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782337793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.The worklist is a versatile floorplan that offers three main variants: a simple worklist (plain page with a table), a worklist with tabs, and a worklist with one or more KPI tags. These variants are based on different user needs and use cases. For more details, see the options under Components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1782337793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Lists with Different FlavorsList cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar chart list card, and link list card. You can also show icons and images. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1782337785,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1782337794,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Take Action on the Overview PageAs well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This is supported by a special interaction pattern with a set of closely-integrated card types: the stack card, object stream, and quick view card. These three card types are only ever used together, and navigation between them has been optimized to best support user needs.A stack card is a collection of quick view cards, which provide a footer area with actions. These quick view cards are displayed in the object stream (overlay). The advantage of using stack cards is that users don’t have to leave the overview page, and therefore don’t lost their focus.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1782337793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1782337793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/letter-boxing/media_1b9793eb36bcd37dcb7e0f6f6875f012c4604a06c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP ...","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/when-to-use-which-floorplan","title":"When to Use Which Floorplan","version":"","breadcrumbs":"Page Types / When to Use Which Floorplan","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Choosing the right floorplan is not always easy. Roughly speaking, SAP Fiori offers floorplans that:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1038cab413a616913e9b43568a3e103b9fe31d937.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1782337784,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Self-Contained CardsThe fixed card layout is a layout for the overview page. It comes with                     predefined card characteristics that support automatic, easy and fast card design. The cards have a fixed width, and the height is determined by the card type and the                     embedded control.The cards are ordered in responsive and collapsible columns. The number of columns is also fixed to keep the focus on the middle of the screen and show the set of cards                     in a compact display (a kind of letterboxing). For more information, see Responsiveness.The fixed card layout is one of two layout options for the overview page. The other is the resizable card layout.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1782337717,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1782337704,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782337785,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1782337784,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782337785,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.One part of the dynamic page header (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts","title":"page-layouts","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782337717,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782337785,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.Flexible column layout - Example with three columnsThe flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.The flexible column layout is already incorporated within SAP Fiori elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782337717,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined ...","intro-desc":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/semantic-page/media_128a69021abefd20cd335eeb71738fafed96eaae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Cards","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Cards","lastModified":1782337784,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards – Harmonized and Powerful InformationEach task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards for one role on a single page .Cards are containers for app content, and represent an entry-level view of the most pertinent app data for a given topic or issue. Technically, a card is a smart component that uses UI annotations to render its content. Cards allow you to show application content from different sources side by side – without requiring the user to switch screens. Cards differ in the content they display: They can show a chart, a list, a table, informative text, or a combination of two elements. However, cards never have editable fields.Cards can focus on a single object or topic, or on a group of objects. Cards can also vary in size, depending on the selected layout.The overview page can contain several cards that reference the same (parent) application. However, each card must bring added value to the user, and not just repeat information already offered on another card.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/downloads","title":"SAP Fiori Design Stencils","version":"","breadcrumbs":"Resources / Libraries / SAP Fiori Design Stencils","lastModified":1782337718,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic ...","intro-desc":"Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic impression of your final design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/flexible-grid/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also ...","intro-desc":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/flexible-grid/media_1aa1ad1f3fccb9dbb40debc7533de84f2611f4835.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplan-overview","title":"Layouts and Floorplans","version":"","breadcrumbs":"Page Types / Layouts and Floorplans","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","intro-desc":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/media_1c4d78afccc080f19471585c3c3a457cddaaef55e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/semantic-page","title":"Semantic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Semantic Page Layout","lastModified":1782337785,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.Using the semantic page significantly reduces the development effort for app teams, and ensures that the placement of the header and footer content conforms with the SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources","title":"resources","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1782337784,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout is a layout for the . It                     enables users to define a personalized card layout by                     changing not only the position of a card, but also its                     size, and thus how the card content is presented.This layout gives users much greater flexibility in                     tailoring the overview page to their specific business                     needs. And it allows app teams to offer varying levels of detail for any given card. Whenever the size of a card                     changes, the content adapts automatically to show the                     most relevant information in the available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1782337794,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Adaption of standard cardsCustom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card content area. They offer additional flexibility when you require features that are not offered by the standard cards for overview pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1782337785,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.Since the flexible grid behaves responsively, it is suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782337785,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.Beforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.As a result, the user can work on several objects simultaneously and switch between them easily.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see Worklist in the SAP Fiori Elements section.","intro-desc":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/work-list/media_1da586d19728bbc318a095878202d146cb1bf1aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1782337717,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/libraries/design-stencils-for-figma","title":"Design Stencils for Figma (Mac and Windows)","version":"","breadcrumbs":"Resources / UI Kits / Design Stencils for Figma (Mac and Windows)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use this stencil set to create high-fidelity SAP Fiori designs using Figma.","intro-desc":"You can use this stencil set to create high-fidelity SAP Fiori designs using Figma.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/resources/libraries/media_19a9fdcbe8162f7f626cc7e2116a9bbe50c5bc1fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/page-types/page-layouts/flexible-column-layout/media_1fff41ac96f2713712073296a0276f755b7b1c8fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1782337795,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover control can display multiple messages                     of different types in one list. For example, it might show                     several messages related to entries in a form, or messages                     triggered by a finalizing action, such as Save.The message popover is used in conjunction with a technical message manager, which populates the message                     list. If an error occurs at a validation point, the corresponding message is added to message popover                     automatically, without interrupting the user.Users can browse messages by type and navigate to the message details. In some cases, they can also jump                     directly from the message to the affected field on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1782337794,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1782337795,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1d74d61a6ea00cfc1fb4887cd14e2e92ec5efeecf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1782337795,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1782337794,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page, or in the header of an object page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dynamic-date-range","title":"Dynamic Date","version":"","breadcrumbs":"","lastModified":1782337794,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.108.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/p13n-dialog-popup","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_194bc70d4eb39a78b4321a74a596469a9e5aaf60f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dynamic-date-range/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300123,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There’s now a dedicated dynamic date range component with a new guideline page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/dynamic-date-range/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1777300123,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_132d895926ab9026ec9bcb14de3cb3d1ad15168f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/libraries/design-stencils-for-sketch","title":"Design Stencils for Sketch","version":"","breadcrumbs":"","lastModified":1777300123,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/html","title":"HTML","version":"","breadcrumbs":"UI Elements / HTML","lastModified":1782337794,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/illustrated-message","title":"Illustrated Message","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1782337794,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/user-research/user-research-method-cards","title":"User Research Method Cards","version":"","breadcrumbs":"Resources / User Research / User Research Method Cards","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"User research helps you to better understand end user needs, expectations, and typical working processes as you follow SAP’s design-led development process. This easy-to-use card ...","intro-desc":"User research helps you to better understand end user needs, expectations, and typical working processes as you follow SAP’s design-led development process. This easy-to-use card deck provides an overview of the 14 most commonly practiced user research methods at SAP and how to apply them. Most of the methods can be used both physically and virtually.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/resources/user-research/media_15acb1666d58de683c12638690f28339dcfe2fd41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/token/media_194faf9acf24d104d55a905e852105a56e8d2c817.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/formatted-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"By default, the control uses the standard font and headlines. It supports the following HTML tags:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/formatted-text/media_1ad302b9081d3eac381c9202963c8e33714f082fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/flag-and-favorite/media_165a342b5a1cd4e8caa1f2056ffea6b211160c6f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message page gives feedback to the user when an empty state occurs at page level, such as an empty app or list. The message ...","intro-desc":"The message page gives feedback to the user when an empty state occurs at page level, such as an empty app or list. The message page explains what information would normally appear on the page and how the user can proceed.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/message-page/media_19ebf619626d73020c2199d8ae9da438e31b1d28e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/cards","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1777300123,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1e06d0c9de39a97544326d04ebbede698dd331803.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/libraries/design-stencils-for-adobe-xd-2","title":"Design Stencils for Adobe XD","version":"","breadcrumbs":"","lastModified":1777300123,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/form-field-validation/media_1a60823b6e3a8d75aaaf96487420c63fce7955bf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/illustrated-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/illustrated-message/media_1cff33d03262dd17f4232c7831aabcd498957404d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tree-toolbar","title":"Tree Toolbar","version":"","breadcrumbs":"UI Elements / Tree Toolbar","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The tree toolbar always appears above a tree or tree table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_14c69202217ac0c22d00b624861f8437f247a4e51.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/upload-set","title":"Upload Set","version":"","breadcrumbs":"UI Elements / Upload Set","lastModified":1777300124,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_190988245222535843d9b13a767ba59fa138dca02.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"UI Elements / Message Page","lastModified":1777300123,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_17c1c21a0f08570bf7e72cb3857d820edc5b65c26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/user-research","title":"user-research","version":"","breadcrumbs":"","lastModified":1777300123,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dynamic-date-range-2/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/dynamic-date-range-2/media_19491f55a3818f912dd0e3a2c78244e25ec4d874b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777300123,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_139f0673721fc998be3c3394ec581b8d3bb3a3b60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit ...","intro-desc":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a ...","intro-desc":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/cards/media_12cff613555f634035aef58b44089d164475cab72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be ...","intro-desc":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page, or in the header of an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/message-strip/media_17fb925ce0da4ca075e7b043b0d9d85d028baed2e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/table-personalization-dialog/media_1c7b4b60cb1988ecc718fe3a83fc476697cc1dbee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/user-research/how-to-present-your-sap-fiori-app","title":"Showcase SAP Fiori Apps in Device Frames","version":"","breadcrumbs":"Resources / User Research / Showcase SAP Fiori Apps in Device Frames","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images ...","intro-desc":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/resources/user-research/media_1404359f37fcc643bcd23e295ca90721d58fd9542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/message-popover/media_196246300458de95205337a5e1a57cea757c164b6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons ...","intro-desc":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/view-settings-dialog/media_18ac0065e367d3ffa15c71931aba77594965c8a3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Examples of a user image, user initials, and standard user placeholder icon","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/avatar/media_15102b7539cf535c7971b973554d91d3144c1b110.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1782337794,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/action-list-item/media_1f192edd5b50c31f8c7a4a2fffe9904a0e1ffa061.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1777300124,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_15b11bb6a0f5f9906f39f1c6b5c6e23301854b5b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"An analytical table, also known as an ALV or ULV, contains a set of data that is structured in rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1e25aba462f6b6987eb18980e8832d8026a719b9a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dynamic-date-range-2","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date Range","lastModified":1777300123,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_12edf948aa57e6059c601114cee973637facd51af.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1777300123,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation for fields in SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_127712ab7624abddda5f9e8059ac610c143784de1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/p13n-dialog-popup/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/p13n-dialog-popup/media_151c7773aec722459550cdf5e511017c2c3bfe25e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/html/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise ...","intro-desc":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/html/media_19b84bf34545fee97d63137d2ec1147dc6fa299fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1777300123,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The formatted text control displays HTML text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1d0a8ee2910336d169aeadcec159bbf4df86dd2c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/resources/libraries/design-stencils-for-axure-rp","title":"Design Stencils for Axure RP","version":"","breadcrumbs":"","lastModified":1777300123,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300124,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/action-sheet/media_1307ced44ac8cd3751cbe373127338a6dd1b3b55b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/upload-set/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/upload-set/media_16d061e11791583c3ad20e04b2dea6d5b1a055111.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_126fc875b4d9441c69c3bfa3196c1c570e5d455b9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1b03b5d66339f5be27f1d0cd6dd483ddbdf4e3da8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1a04121bc30e895d4c592eb53e453df64f1dcd5d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1777300125,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1923dbdc763deedfff4b08951b3d5ca855e63c934.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/message-toast/media_1452174aa65f6fe723d9ba054683dbed46c49f6cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tree-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","intro-desc":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/tree-toolbar/media_13c16b182e7d7732de73a72320704c8c0f55e4f41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/analytical-table-alv/media_1e7183a20648f018b82be40008d0dcafabad03cb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1777300138,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1f56d58bb148b3d6da9be7771b4fa25290abf15d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe","title":"chart-vizframe","version":"","breadcrumbs":"","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type","title":"choosing-the-correct-chart-type","version":"","breadcrumbs":"","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts. It comes with built-in actions for the table display and personalization.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1b42da34c0ff823e3f62de84f7f372da25ab54849.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it's crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_19aaeb7fb71e579c1fb65563e213112ebbbe6169d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300140,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Comparison","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_17332c2ebe0065b9e8653a1e0fc809ab49973669a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Ranking","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to choose the correct chart for ranking items based on numeric values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_198df7305b7fc5050fa8f61ad0a0933907ae75b12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1777300139,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1977181d19a7a94847955e24ac98332dcb2ab6704.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Part to Whole","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_119bec665a0b300b017f8c5ae26df4bdf6f1f5c7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Time Axis","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1cda229d52f6623987285b35200f9e75e85a422a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Correlation","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The article explains how to use different charts to visualize the relationship between sets of numerical values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d56079cb733ca1637af1d50ac99bf387b32367a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calendar","title":"calendar","version":"","breadcrumbs":"","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval control displays a range of days in a single row, saving on horizontal space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1418c5bb245b800c8ca3aacd65839c15915243cd8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Chart types available in VizFrame","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1dfdd6e01f3777b6c79232c808e278af4e5226776.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"","lastModified":1782337786,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777300138,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_17f216b89aff0cd8c5f23a03026e93560724c041e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/breadcrumb/media_16013b09ed8605a8e6769a2e6460930102375627e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calendar-card/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected ...","intro-desc":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/calendar-card/media_1cf998dde09d9c7b19ba8439e201941eb05d3aae2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/calculation-builder/media_18aec04f8fc16c780b640f8a9488996bc891d0b85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calendar-card","title":"Calendar Card","version":"","breadcrumbs":"UI Elements / Calendar Card","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1eac993b6e1a1935bb1ab18357493182da0f90f78.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the Previous and Next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/calendar-date-interval/media_1e7d0554823734fa58c69f38f3dada666ed438f7d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-types/media_1bf79942bc727d82c713c0b4f74b1da3b54318965.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1777300138,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_18f051784aa3605f6e3af0fd8ad72e66f5166d594.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-toolbar/media_1d836296792fd447472804da0faa5f1369713c4da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777300138,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons enable users to trigger actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_18902c8ecddb6d4d89af972a26ae9a51fb4d0a6bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Popover","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The chart popover displays information or actions related to the selected data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_19ca9b15c3785c183a6484ef5b730bc9943317841.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Reference Lines","lastModified":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Add reference lines to highlight a particular value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_198b5389c27836743e942b0ec9485fbf03a7ad53d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ongoing operation covers only part of a screen that has multiple controls, and:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/busy-indicator/media_1e5850f86967e7aaad8da6fb64fe3b410e2ac3941.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777300138,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_12ae6343e60ce4d2476cd51313af9be064b7aa666.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, ...","intro-desc":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/calendar/media_1b5dc077d6a4be97ff215f46980530b946997f4f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Semantic Patterns","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_17ea7ae7794e4c4d22eed1ba4adbc89e6df41d114.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Embedding","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Zoom","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"xThe user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-value-based-legend","title":"chart-value-based-legend","version":"","breadcrumbs":"","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"x","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/values-and-names","title":"Chart – Color Palettes – Values and Names","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes – Values and Names","lastModified":1782337786,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page provides all the color names in the chart palettes.Use Names – Do not use HEX values!Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.You cannot change the HEX values unless you create a new theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Deviation","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the deviation (difference or variance) between two measures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d90cb315472cd4160e37451219d4b27d05b4ddcd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color names in the chart palettes.","intro-desc":"This page provides all the color names in the chart palettes.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300139,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons allow users to trigger an action. There are 4 button types:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/button/media_18c544dfd01aaa6578bfbd754c1e427746bd44141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1777300140,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c0549d8befcf8607301fc4e1c5769cb889c948bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Range Selector","lastModified":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The range selector is a user interface control that enables the user to select a range of data points in a data set.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1365f96e7784d8d23cc3e608f2ac6f83f44d0ef0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Number and Time Format","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/busy-state/media_16e30becd2841a8bbdbde30b01be18525b9b85a84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Selection","lastModified":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes the different ways users can select one or more data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1eb2c60448de4b314876e4f1cac80ed735883fcca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked ...","intro-desc":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/checkbox/media_12de749261dd0eaf2b857c896df7bf87778536559.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Legend","lastModified":1782337786,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/color-palettes/media_110ae4a44b1ffb64ee40d61435ce0279d39a8b0bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/busydialog/media_13aa5ff9f7de0c020ee6a30a41f3be54ff221703b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.","intro-desc":"A chart popover is used to display information or an action related to the selected data points of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/pop-over/media_1f4435945d3dc5f915f2d8e10bf14e9b0546b54be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Variation Over Time","lastModified":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article illustrates the different ways you can visualize changes of measures through time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_18fd1e5ae95cc0dac8d9d23a36d82fc215e65e34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/color-palettes","title":"Chart – Color Palettes","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1782337787,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Size of the Chart Container","lastModified":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The property \"autoAdjustHeight\" helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/media_1b559114bed77c670f06ad86c970851c850079923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1782337792,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_132a212a1cdd659cd8a4a816cc3e821771e78acef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/expandable-text","title":"Expandable Text","version":"","breadcrumbs":"UI Elements / Expandable Text","lastModified":1782337788,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1782337791,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows                     content in the form of labels and text.As forms                     are generally the preferred control for combining labels and                     fields, display list items are seldom used.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1782337788,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.Show Comparison for Selected Items","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"","lastModified":1782337717,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1777300157,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_19835d963b20571089a1098e3cb48d39bdd5e936f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1782337786,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.If the entries are not validated by the application, users can also enter custom values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1782337789,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/contextual-filter/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300157,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Filtering options are now covered by the filter bar and table toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/contextual-filter/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1782337788,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300157,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color palette with 15 colors and just one recent color","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/color-palette/media_12ae77a64ad0711d80f1329dc66dfa8895f089415.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300157,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/color-palette-popover/media_17b786cf30cdfc76290a350f60b8e26789b48ee14.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1782337792,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1782337791,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed                     enables SAP Jam users to post comments and reply to posts created by other users. You can use it just for                     collaboration, or offer collaboration alongside application-generated content.Like the timeline, the group feed component shows a series of                     entries in chronological order, such as changes to an object, events related to an object, or user-driven updates and                     comments. The latest entry is always on top.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1782337791,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.The Gantt chart control provides the basis for creating such a Gantt chart and is a generic tool. Applications can consume the control in order to implement their use cases, and if necessary, they may even enhance the control.It consists of three areas: a chart area, a table area, and a global toolbar.Another feature is the option to have a split screen that includes two or more views next to one another, each view consisting of one table and one chart. These views can be arranged vertically or horizontally, and they share a common (global) toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300157,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/color-picker/media_1b078aaf0dc5403af74c988e35c55cb41c0a2cc5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/expandable-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or ...","intro-desc":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/expandable-text/media_17ad853611798a7462651553678bb2b08898ff395.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1782337791,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300157,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/color-picker-popover/media_1a848c35dcc69fb71fb037a1ff2ab8d67c4815745.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"The date/time picker allows users to select date and time values in a combined input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/datetime-picker/media_149c67e757203a28f03639e2676d5ca3bfecf02c1.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1782337788,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1782337789,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using                     touch, mouse, or keyboard input. It consists of two                     parts: the date input field and the date picker.Use this control if the user needs to enter a single date                     or a date range. The control also allows users to navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/comparison-pattern/media_1c240b529e72e2fa053c6626e59d9cc68e9fe8645.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300157,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/date-picker/media_1da94e74ba4a2dbee666c10d58a3d53122cee0e52.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/date-range-selection/media_1553ea7fff4a734085596fdcc7311fa936716bc92.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300158,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/display-list-item/media_133b9d5f6374df618a2c60b0e091d9fde05205715.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/export-to-spreadsheet/media_1912ebaa7a6ba534c69fd7d1fe7beb3883604e36a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300158,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mask input extends the input control (sap.m.Input) and has all the normal properties of an input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/generic-mask-input/media_1ecc41657c1842b1b9bb64e71b30f44013c2a7f17.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1777300159,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1083775524bad08c6e8cb152ac6bfec12ca893379.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1782337791,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.In SAPUI5, forms can be built using two different controls:                     Form – sap.ui.layout.form.Form (API)                     Simple form – sap.ui.layout.form.SimpleForm (API) With a form, you can easily layout a list of properties and input fields. A form is structured into form containers. Each form container consists of form elements. And each form element consists of a label and an input field.The simple form control gives you the possibility to achieve the same result as with the form control, but in a much easier way. Inside a simple form, a form control is created along with its form containers and form elements:                     The layout and structure are defined by the content that is entered.                     Form containers and form elements are created automatically according to the content type.                     A title (sap.ui.core.Title (API)) automatically starts a new form group (form container), and a label (sap.m.Label (API)) automatically starts a new row (form element). All other controls following this label will be assigned to its row (form element).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1782337789,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_182fa7ad74bd6db4daba2981f58715d04f388739e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a ...","intro-desc":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/dialog/media_1b262a4dff5a4a69520ac90807071fdaa6e902b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1777300158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300159,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/gantt-chart/media_182607306f0ec9c8750541a3ff9cd5c21c5bc4a94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation ...","intro-desc":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/icontabbar/media_13a1e737768ab81e4f53ccbfad8dad52a1207ea86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. ...","intro-desc":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/dynamic-side-content/media_12daa1058e0ed755fb7392a2683ce8c170088a964.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1782337790,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users                     to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card                     number, currency, and IP address).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/feedinput/media_11b7a529fcc4ef4db57e1f2259811def5acfc7da4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/combo-box/media_18b457f9616bd67c2dac48ec1574a056eab37a024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the ...","intro-desc":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/grid-list/media_1b454ce5b965ffd3cacbcca0cf7f7a9a4e50a737d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/form/media_1d63a4170d01a5c0934425974c4c1e1e0075d3323.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/grid-table/media_13d9eaa358eb22d8ad8736226ab9bfc07e5d8c2c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1782337783,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of related controls.Every field needs a label. If you use one label for a group of fields, use a combined label and invisible text to label the single fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1782337781,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/invisible-message","title":"Invisible Message","version":"","breadcrumbs":"UI Elements / Invisible Message","lastModified":1782337779,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1782337782,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300174,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/input-list-item/media_1eaaeaa0a5452a278606c9e19135caa52112785c7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1782337779,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:                     Filter criteria: The infobar indicates the filter criteria that have been applied for a filter, for example on a table or list. Do not show the infobar if no filter is applied.                     Selected items: In a multi-select dialog, the infobar shows the number of selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_145a213fa53d2acc2be46d53891379fb77af77971.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782337778,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as hyperlink) is an interactive text                     element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1782337778,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of                     input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/input-field","title":"Input Field","version":"","breadcrumbs":"UI Elements / Input Field","lastModified":1777300173,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_168640df3ccffba70615ba464269dbd6ab9697764.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1782337781,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/invisible-text/media_1bb653aeb0da45903951b29fa321db56586b9f21c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300174,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A label is the name or title of a control or group of related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/label/media_1a0ba7b427c7b4049585c99851c6394c2d0a22266.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into ...","intro-desc":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/image/media_16451af95fa2d40b83226fc5eb72c93be6114bf58.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/invisible-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users ...","intro-desc":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/invisible-message/media_18eac0c5b4fddcdd03feeccd307d69481b64d77d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/infobar/media_15dca207dbb06e696076b22dd2098a1211b5b5bf2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1782337781,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/message-box/media_1ec4554406bdc4757477eca2294f2d9170f2f0d86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300174,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The link can either truncate or wrap. Favor wrapping over truncating and keep the link text as short and meaningful as possible.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/link/media_1baef3484015761e8a00e7a19bb9e9807df0fa3b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you ...","intro-desc":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/input-field/media_195a274d7ee02e1e1a463bbfbd6041926962285d4.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1782337792,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1782337788,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-form","title":"Smart Form","version":"","breadcrumbs":"UI Elements / Smart Form","lastModified":1782337789,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782337792,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1777300191,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_10bd8e35033f523b65aac4b5019fa93df3a1045b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1782337794,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1777300191,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see parallel appointments and create new events.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c2d479a9e64de20357b6f99a888481f35f737ae4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1782337789,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.When triggered by the business application, the output control collects and validates all output parameters, creates the output documents, and outputs them. The possible output parameters handled include what to output, for whom, when, and through which medium.A simple use case is: you choose to email an output document to your customer based on an available form template. The system records the date the output was created, and indicates that the output has been sent.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1782337792,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.A line item contains several data points sorted into columns. A data point refers to a unit of information, such as a number, a text, a unit of measurement, and so on, which can be used to form the content of a table, form or other control. One data point is usually displayed by a control, such as a text, object status, or input field. A control can display more than one data point, for example, by concatenating text.In contrast to traditional tables, a “cell” of the responsive table is not limited to displaying only one control, and therefore a single cell can present far more than one data point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1777300191,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the process flow control to represent the stages in a business process (such as approval).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1034d643556c0d7a392ffff83a7d7b05bac922de2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/pdf-viewer/media_1bfa25b86afee6191679c8e74904e96c327bba1db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777300191,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the rating indicator to let users rate content, or to display a content rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1cde5b70b486f81f2e2fede5e8df39a8c9daa1300.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1777300192,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive and searchable list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_16ab7a5506682c5c242cc732071dc430b34804103.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1782337789,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1777300191,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_17a4d74f7eb157d90bbef713c5dec90808d31f0ff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to ...","intro-desc":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/message-view/media_1e0a1dd474125e4da01a47048011f5df39810a178.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/quickview/media_1c26630b4d844c4a3a3b964ac55788481a644a054.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb ...","intro-desc":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/category-navigation/media_16ea748199d8c402123173db74045f3537b3b5388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1782337791,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control ...","intro-desc":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/output-management/media_147f032d680639911c698dfb0a49783e2d38b6027.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300192,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/object-display-elements/media_1d5e293aa90a85990cd3e79fbc23bdae9e037287e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/single-planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/single-planning-calendar/media_138330fed23841f66ba8e2a21aef216490a306641.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/placeholder-loading","title":"Placeholder Loading","version":"","breadcrumbs":"UI Elements / Placeholder Loading","lastModified":1777300191,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_10be93ad85f14bc84d1b8c30009d0586b16ca7f09.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1777300191,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_126ca080cad7de2e9b2a5919204aecef23ea7bb2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/shell-bar/media_11ddc43932564566f7831a8366a8f9eb530bcb7b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782337791,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is                     connected to an object and displays a certain type of                     information (status, identifier, number, marker).                     Object status: a short text that represents the semantic status of an object                     Object identifier: a short text that represents the key identifier of an object                     Object number: a short text that represents the numeric                     (key) attribute of an object and its unit                     Object marker: indicates the technical status of an object","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/scroll-container/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","intro-desc":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/scroll-container/media_1685d43a2e70460d15841eee27d8a56c3ad9d4b3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/rating-indicator/media_16ac117ff61db9722b4ab3dcbcdaf33f3133fb33d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1777300191,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF Viewer control enables PDF documents to be displayed, printed and downloaded within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_196b8ce547996f5ecc1f1a73c8ac39e37a7b0a989.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/process-flow/media_1b3b1b8be78eb186eac11e2b1d70bdf40ae708923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/shell-bar","title":"Launchpad Shell Bar","version":"","breadcrumbs":"UI Elements / Launchpad Shell Bar","lastModified":1782337788,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/scroll-container","title":"Scroll Container","version":"","breadcrumbs":"UI Elements / Scroll Container","lastModified":1777300192,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The scroll container is an empty area that can be filled with content, such as other UI elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1bf0e645420f6063517459b6231104ce33d7be50e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1782337790,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.                     The smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300191,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item’s text sizes are limited due to truncation. The title wraps once and truncates after two lines. The key attribute also truncates ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/object-list-item/media_1f45470c7866e6bf8083da18bf1c214a3a08ea800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1777300192,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1dfcdc1819c1f733ccedcbbdcac973961700f94ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/p13n-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The p13n dialog control allows users to personalize one or more of the following table attributes:","intro-desc":"The p13n dialog control allows users to personalize one or more of the following table attributes:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/p13n-dialog/media_137b98d61c8dfe554af203fac3d61db837f19ff3b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1782337790,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1777300192,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor is a text input control that lets users format the text and insert different types of elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_16177af901fdc26a4940ef75064698a54573136e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-field","title":"Smart Field","version":"","breadcrumbs":"UI Elements / Smart Field","lastModified":1782337788,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/planning-calendar/media_1f0db41ef1a86ccfbd220d19188df53d2b5c718f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1777300192,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The search field enables users to search for information or filter data by entering key words as text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c2e40222c3b1f486b1dfc7d0164c86027b1cf8e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has ...","intro-desc":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/notification-center/media_1c8ee29e0757c7fd4ee733773ccc31da90eb1382e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can ...","intro-desc":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/multiinput/media_17d4827979432d36522e8b755a880e7a483d3ef85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-list","title":"Smart List","version":"","breadcrumbs":"UI Elements / Smart List","lastModified":1782337792,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the smart list control to create lists or trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the smart list control to create lists or trees.","intro-desc":"You can use the smart list control to create lists or trees.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/smart-list/media_1b94ab65835677a74e9c0e573b679b916946adf82.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1777300192,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_16b8bc930daf6b444cb9f3d2f7f3faf7241508581.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable ...","intro-desc":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/multi-combobox/media_10d500acaab4c158d56c651bf63a146324fb473a1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and ...","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/smart-link/media_1fc9217782813e0c2c8c06bfd76d6a37237929542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/rich-text-editor/media_10c6fbe2398260def9ecf37662212e23e42d808bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300192,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/search/media_173c464bcffb8da1ceed059355bddeceb7346eae8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/select-dialog/media_151d474f12215db531d4813d312889e5dd488b289.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-form/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for ...","intro-desc":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/smart-form/media_148f43ae8402e44ccb124c8141019c1cb70ae4d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/placeholder-loading/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. ...","intro-desc":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/placeholder-loading/media_13175ff2e20060d41ef72d9cee92b3f257f4ad589.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/select/media_14f87bdc64bc20d6b1ebe6f4ec6457eb42ef2d9d0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes ...","intro-desc":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/smart-field/media_13982ddaf16d568b28f5fbf53dd98b2079035ecbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, ...","intro-desc":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/responsive-table/media_19514703fea1c7b754a26171c02247c81b38e2eb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. ...","intro-desc":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/smart-table/media_118fbde6f6a28daf57a908ccf016ab3cad214d6c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1782337783,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.A common use case is to provide information about changes to an object, or events related to an object. These entries can be added manually or generated by the system (for example, value XY changed from A to B). The latest entry is always on top.Another use case is a feed that is driven by user updates and comments. This feed can also be entirely devoid of machine-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1782337790,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.This article gives an overview of what kind of different toolbars exist and when to use which one.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1777300209,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1e654853184a3f217c4ce7597b0ce96b6c9e63141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1777300209,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1737abaf8277cf86d9c369167e3241877397a3003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/translation-of-textual-user-input","title":"Translatable User Input","version":"","breadcrumbs":"UI Elements / Translatable User Input","lastModified":1782337790,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business                     objects may need to support textual input to be                     translatable into several languages. The use cases for                     translations of texts might be very specific to the                     application context. This guideline will define a pattern                     for a general use case. If your use case differs, use this                     pattern as the basis and adapt it as necessary.The key features of this pattern are:                     The initial maintenance of an object and its translation                     are separate steps. Therefore the maintenance screen of the                     object (in many cases the object page) will accept any textual input in the login language.                     The translation of the textual input is a separate                     (follow up) step. It is done in a separate pop-over dialog                     focusing solely on the translation task.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1782337790,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.In the case of tree tables and trees, items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single topmost node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1777300209,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1d0daf335006e27ca534061c8966172506d8c7270.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"","lastModified":1782337714,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1777300209,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1be78841a819a454cfd25ae304e7cf888836b938d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1777300209,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_121a704525f8ecb7569902864a322e763fca4e245.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1782337782,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple conditions. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/table-select-dialog/media_1429c80d6a6fc0224079b28b3d48696966ec64bea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1782337780,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1782337788,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.The title is used, for example, by panel, toolbar, or list components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1777300209,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1577adf2c626ba4aae3c6bcb93c56c64106d277b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1777300209,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_17243cfb7db8a63525e36ddc1c708cd93b9a1e5c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"The step input control allows the user to change the input values in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/step-input/media_18fcd8cfe88652ecff8cd8666dbc7f9da7138c9b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/variant-management","title":"Views (Variant Management)","version":"","breadcrumbs":"UI Elements / Views (Variant Management)","lastModified":1782337787,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.The variant management control enables the user to load, save, change, and maintain variants.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1777300209,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1e23225dabddd022a02bbfcbdbfb7f7b30c089430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/time-picker/media_1abafe930c2047d5c4e059f691fa15a70eaccaf43.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1782337782,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.T accounts are usually clustered together, so the accountants can analyze how individual line items from different journal entries affect the ledger balances.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1782337781,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally                     contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300210,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/translation-of-textual-user-input/media_14ed9bfa5c8f88c852b17f41ec904a9d983dcd3fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300209,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the text control if you want to display text inside a form, table, or any other content area. Do not use the text control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/text/media_17a6a4d7d9ecbe3b0185343536e6e9dd8316ba336.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/timeline/media_1a5870b3ba47daf14588a43ad372c6e5d2aed4c0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"The text area is an input control that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/text-area/media_14a067e78bf2b63cd367568fe51aaa65afabe88b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak ...","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/variant-management/media_16e7eb31b3d9c6b01aa2f8f3e07f13e4a7f492129.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/upload-collection/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300210,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection component has been replaced by the new upload set component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/upload-collection/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300210,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and ...","intro-desc":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple conditions. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/value-help-dialog/media_15ebd4b0fae7bfc69fb0da64311d82776d2658555.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300209,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/status-indicator/media_1204bd3d1e927fceef6f0f4c80ec470ebbd23a39d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/toolbar-overview/media_10f9a05ba1d8be44b0e3a449cf45f9e709644c72f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300209,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item can consist of the following parts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/standard-list-item/media_11d242e77027bb4f0313ea57e7008f1a7d06be968.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300210,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/tile/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/table-bar/media_163843b8fd5478550baedcb91d0f0a29e66b20474.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/tree/media_18d1dc8dba17e241eb8d6887fca3af6af284bc2e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/tree-table/media_12c2920fb57e11f0b4a2d61dda3a3659f389b340b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/menu-button/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300226,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The individual button guidelines have been consolidated in one button guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/menu-button/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1777300224,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_18adc4130bbed88d5181c14d1be4fc12b73caaa66.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1777300226,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1edd7bc7cfe6abde044176cb5b48a54486064b031.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777300225,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1363874a3f73836f5da6cce0ced88d37e0f0c0122.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1782337781,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1782337781,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).The smart filter bar is closely related to the filter bar, as it covers the same use cases. The difference is that the smart filter bar uses annotations to create a filter bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1777300225,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A popover displays additional information for an object, and can also offer actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1e214dd1165e3670ab6e0c507dff22baa67530c38.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/radio-button/media_10b58c1999bcb2bbf955c325404068bc614bee611.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1782337779,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1782337781,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1777300226,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The range slider enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c64ea70b0eec6e0b70495400cd2b78f5a690d732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1777300225,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_169b720bbcb5ce455bbf27c5d3032fea82aca85b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/header-toolbar/media_16211bc4d4ad8145a4c8bbb2e6676c81d00b3112a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such ...","intro-desc":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/popover/media_15102e0a496776448e60352dfb0bb45ec1dd6370a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/generic-tag/media_1587875b87665528a3047fdb684f14cb8ff9911bd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300226,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/area-micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1782337777,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"A slider is a control that enables the user to adjust single values within a specified numerical range.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/slider/media_1e7452b990d893329fb385c25c0afcd94cc5c25dc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1777300224,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel is a control for browsing through a set of items one item at a time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_17bb56bc06426d3f63c66a9976ce763e9c80645f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1782337783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.You can put the VizFrame control inside the ChartContainer SAPUI5 control. This enables you to place a toolbar above the chart which gives users the ability to switch between a chart view and a table view, as well as switch to full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777300226,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_147c4d25afa4cd891d6a5f00e0cd4cfb97dddd3a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1777300226,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart, which provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_138288a10e29da6edc421acac87be684e05429910.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/avatar-group/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300225,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The group type displays overlapping avatars. Use this type if it’s important to display the sum of people at first sight, rather than the individuals. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/avatar-group/media_19bb9eb22bed3e7c10d622a366257f769572da1f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/carousel/media_1dc2820fc95aafa66306509643071ad960bfab90f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300226,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/panel/media_15b8575da3aad93947366e9c9566a844968c490e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/barcode-scanning-mobile-integration/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/barcode-scanning-mobile-integration/media_1af908aa391d2b095e466808e24e2c11b6d22cff4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of ...","intro-desc":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/filter-bar/media_14628a6397c474b8bfeb9801aa7e5a3855e77f65a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/visual-filter-bar/media_17835f9f64b09f168012cae34805aaba4d6ec00b0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color ...","intro-desc":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/progress-indicator/media_13042cf0dc50209899b709f01d3c1f135c13ed11b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/wizard/media_1dbf1c997b206d1453cc9a04b32c515252d4439a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1782337782,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1782337783,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/barcode-scanning-mobile-integration","title":"barcode-scanning-mobile-integration","version":"","breadcrumbs":"","lastModified":1777300224,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300226,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The default steps can be replaced by other controls. The following controls are supported:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/micro-process-flow/media_16ad4ea12ff054ea17f03587aa63bf439f3633207.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1782337780,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize                     the state of individual items in a linear workflow. You                     can embed it into a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1782337781,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.Visual filter bar - Size L","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1782337778,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.There are three main ways to visualize a column micro chart: View with top labels for start and end values, and bottom labels for start and end dates                     Detail view with labels for each vertical bar. This view can be used only if there is enough space for enough bars width in the container.                     No labels. In all cases, the label can be switched off. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1782337781,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/footer-toolbar/media_12a3f22e888af82d7f02d0156be07146fe923ea87.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1782337784,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777300226,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator shows the current completion status for a business process (static value).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_16b4a24f2f8fd91beef9a8e9a8702d0c6c1f4c1d8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"UI Elements / Smart Filter Bar","lastModified":1782337778,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).The developer can use annotation properties in the classes ControlConfigurationControlConfiguration and GroupConfigurationGroupConfiguration to adapt the filter bar for the purposes of the app.These annotations let you:                     Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)                     Enable the autocomplete suggestions feature                     Enable the value help dialog                     Overwrite settings from the OData service                     Set custom filter groups                     Add custom fields                     Access all settings for the underlying filter bar                     You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","intro-desc":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/range-slider/media_13f5fb9c32b7956325c2620553ac51543f92e4042.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1782337780,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/avatar-group","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1777300224,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays a set of avatars that represent people.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_18d9d3b2859970a6d07f62467fe37a753914a5003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/smart-filter-bar-annotations/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300226,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/smart-filter-bar-annotations/media_10b3bb212111088c2766c6dfcf7de3de41d88c661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1777300226,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_146e56fe94d51d0b6d6894f5ca69e0a3cc9d998c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/lightbox/media_178f3edfee6590bd7c938b8cf241e41c930c1a400.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1782337779,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows                     users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1782337782,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter by categorical data. Depending on how the data is sorted, this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1782337782,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label (Web Component)","lastModified":1782337680,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the radial micro chart to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1007e89d89f41eaf1ceeca5ceace06bb189984661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1782337779,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter large sets of data by time period. The user can see both the time period and the measure at the same time, where the period is always the horizontal (X) axis of the chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1782337678,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1782337680,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1782337784,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/community","title":"community","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1782337783,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1782337779,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are three switch types: basic, semantic, and with optional text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/switch/media_1c4cad438673e7e8c95747f46022eec2e0114524d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1782337778,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.The line micro chart supports up to three lines, but we recommend using only one. You can modify the color of each line using the qualitative color palette or semantic patterns for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input (Web Component)","lastModified":1777300231,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1af37aea2cf61df56f80f341a7d74f2174ac5ed37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1782337778,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1782337678,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/label-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/step-input-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/treemap-chart/media_102283bffb453f5cb670e066ed8adf38f014ef22f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1782337782,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.Examples","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/community/contact-us","title":"Ask the Community","version":"","breadcrumbs":"Community / Ask the Community","lastModified":1777300231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1e2cd72b19bb1b0af44f2ebc94d9754bc7b6e27ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1782337779,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.Users define the business logic in a decision table, which includes:                     One or more conditions                     The results that are returned after evaluating the conditions","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1782337779,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1782337778,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).The interactive donut chart allows the user to filter by parts of a whole – depending on the sorting this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-108/community/newsletter","title":"Stay Up-To-Date – Newsletter, Rollout Sessions","version":"","breadcrumbs":"Community / Stay Up-To-Date – Newsletter, Rollout Sessions","lastModified":1782337677,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Design Newsletter is sent out every two weeks and contains valuable information for all SAP Fiori designers, POs, developers and interested colleagues.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-108/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, ...","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96","title":"v1-96","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/get-started","title":"get-started","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists","title":"tables-and-lists","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/list-sap-fiori-elements","title":"List","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / List","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","intro-desc":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/object-page-overview-sap-fiori-elements","title":"Object Page – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Overview","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Culture, as we understand it, follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/object-page-content-area-sap-fiori-elements","title":"Object Page – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Content Area","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen ...","intro-desc":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen from scratch, you assemble an app from standardized pages that are automatically filled with your business data and actions. The result is a consistent, responsive, and accessible UX that follows SAP Fiori guidelines with far less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/community/newsletter","title":"Stay Up-To-Date – Newsletter, Rollout Sessions","version":"","breadcrumbs":"Community / Stay Up-To-Date – Newsletter, Rollout Sessions","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Design Newsletter is sent out every two weeks and contains valuable information for all SAP Fiori designers, POs, developers and interested colleagues.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/list-report/list-report-content-area-fiori-elements","title":"List Report – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Content Area","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","intro-desc":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/list-report/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/table-features-sap-fiori-elements","title":"Table Features","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Features","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for a table detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for a table detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or ...","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/terminology-sap-fiori-elements","title":"Terminology for SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Terminology for SAP Fiori Elements","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help you better communicate with application developers, this article presents:","intro-desc":"To help you better communicate with application developers, this article presents:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Intercultural UX – Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural UX – Environment","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and ...","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/analytical-list-page-overview-page-sap-fiori-elements-2","title":"Analytical List Page / Overview Page","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Analytical List Page / Overview Page","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates. Consequently, you can find the information for all ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/table-rows-sap-fiori-elements-2","title":"Table Rows","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Rows","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe ...","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/media_1ec9991d1adc6d26c349fbdfe17a171c1c93dc1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/get-started/ui-elements-overview","title":"UI Elements","version":"","breadcrumbs":"Discover / Get Started / UI Elements","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the UI elements used in SAP Fiori. UI elements range from simple controls to complex controls, and include reuse ...","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","intro-desc":"[external_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/object-page-header-sap-fiori-elements","title":"Object Page – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Header","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/media_1648e6371a26398f6fbedc294b5e47e67b4599684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/table-types-sap-fiori-elements","title":"Table Types","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/media_12a7af32dcdde6d1dc193a9433388fe94cfb79fce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/community","title":"community","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/situation-handling","title":"Situation Handling","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve ...","intro-desc":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve the situation by gathering all relevant information and proposing solutions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/media_1e8f9d4420c40c8e895d76b722653bc51ba327f58.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Cultural Differences in Needs and Behavior","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Cultural Differences in Needs and Behavior","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects ...","intro-desc":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects may include socio-cultural norms and conditions; beliefs; attitudes to responsibility and taking the initiative; established practices; demographics; and trends in technology. They may also have an impact on design decisions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/list-report/worklist-sap-fiori-elements","title":"Worklist","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Worklist","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report ...","intro-desc":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/overview","title":"Designing Intelligent Systems – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / Designing Intelligent Systems – Overview","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/smart-templates","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/media_1913d671ec4c6a05b42ec85b4fe01724f8738f612.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/sap-fiori","title":"SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / SAP Fiori","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of ...","intro-desc":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/media_10203c9efe37f765d5bb8f8adc8bcedfee57c6818.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/designing-for-empty-states","title":"Empty States","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Empty States","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"Live","description":"Empty states are moments in the user experience when there is no content to display. They can appear anywhere within an application and occur most ...","intro-desc":"Empty states are moments in the user experience when there is no content to display. They can appear anywhere within an application and occur most commonly when a user:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze ...","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/analytical-frameworks/media_13c0a32cf660ff94271312170ee2634f9f375c3b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products","title":"sap-products","version":"","breadcrumbs":"","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/list-report","title":"list-report","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"Business Roles and Tasks","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Business Roles and Tasks","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for mapping a business role to SAP Fiori, including:","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and ...","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only","title":"sap-s4hana-only","version":"","breadcrumbs":"","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, ICD, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, ICD, and DSC","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with ...","intro-desc":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/media_1ae5c2959796dec30e438debe112eb27b08d113ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section outlines the foundations of the SAP Design System for web applications.","intro-desc":"This section outlines the foundations of the SAP Design System for web applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/object-page-footer-bar-sap-fiori-elements","title":"Object Page – Footer Bar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Footer Bar","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/product-standards/ux-consistency","title":"UX Consistency","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / UX Consistency","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","intro-desc":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"Foundations / Best Practices","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/ranking","title":"Ranking","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Ranking","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Ranking simplifies complex decisions for business users by showing the best options first.","intro-desc":"Ranking simplifies complex decisions for business users by showing the best options first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/media_17802c166b7e4b6ac057feff2e5f92f82e285265d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Simple Objects (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Simple Objects (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows ...","intro-desc":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_1a1cc118fe7262666a86d6ce90117d257b1581cc7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/object-page","title":"object-page","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/best-practices-for-designing-sap-fiori-apps","title":"Best Practices for Designing SAP Fiori Apps","version":"","breadcrumbs":"Discover / Get Started / Best Practices for Designing SAP Fiori Apps","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you ...","intro-desc":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-products/sap-s4hana-only/media_1b27db6dd4b6c0eec3b05bd02699ba8e86b44bd1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines","title":"Designing Intelligent Systems – Guidelines","version":"","breadcrumbs":"Foundations / AI and Joule Design / Designing Intelligent Systems – Guidelines","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to establish a feedback loop in intelligent systems.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation ...","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/navigation/media_1e93ccccc2b283d2a243d359a6999c48eb4e66169.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/explainable-ai","title":"Explainable AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of ...","intro-desc":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of an algorithm. This is even more critical in business applications, where users are held accountable for the decisions they make.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/media_1168ad1270482479ce4fa0d4a290ea4dc295be08e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Object Handling – Partial Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Partial Edit","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_151176540ca66a2118dae22b47e68ef45b94f4f55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/versioning","title":"SAP Fiori for Web – Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/recommendations","title":"Recommendations","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Recommendations","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of ...","intro-desc":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of a recommendation pattern and its impact on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/media_1e8ddcce56382a57087a5cb9f95aede02449e1145.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/overview/designing-intelligent-systems","title":"Designing Intelligent Systems","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing Intelligent Systems","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The concepts for designing intelligent systems are still evolving. As we gain further insights from users and app teams, we’ll continue to refine and enhance ...","intro-desc":"This section covers the design concepts for intelligent business systems and machine learning in SAP business software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/overview/media_196fd67266d0e616f12adfe04a08c39cfea9a7867.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover","title":"discover","version":"","breadcrumbs":"","lastModified":1777300350,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/whats-new","title":"What’s New in Guideline Version 1.96","version":"","breadcrumbs":"Discover / What’s New in Guideline Version 1.96","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.96.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.96.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784262878,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral ...","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But ...","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/messaging/media_1e31edeec71c3c5526929514aad95034cd99f6720.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Complex Objects – Global Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Global Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","intro-desc":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_107badff44f210450a3174b27162b1185cbeb4ef7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design","title":"Designing Intelligent Systems","version":"","breadcrumbs":"Foundations / Designing Intelligent Systems","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent ...","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/list-report/list-report-header-sap-fiori-elements","title":"List Report – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Header","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","intro-desc":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/community/contact-us","title":"Ask the Community","version":"","breadcrumbs":"Community / Ask the Community","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Object Handling – Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_18613303bfe2a1150661fb1e7e7277403519fcba6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/feedback-loop-in-intelligent-systems","title":"User Feedback","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / User Feedback","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In the context of intelligent systems, “user feedback” refers to the process of collecting, interpreting, and integrating user feedback into the system to improve the ...","intro-desc":"In the context of intelligent systems, “user feedback” refers to the process of collecting, interpreting, and integrating user feedback into the system to improve the intelligence and the results.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/media_1848cf8acc4dbf67a1d0dfe9a54875ad05997f0e9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/copy","title":"Object Handling – Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Copy","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_19c2b382122892c2af0945dd02aeb09a4cc5f41a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Complex Objects – Local Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Local Flow (Create, Edit)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","intro-desc":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_1c8c74db63ff7c7cbca5347151b48e2aadd70407e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1780046936,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777300351,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Mass Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Mass Edit","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","intro-desc":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_1882138d3f9c25bf3fb26ee3a7984f13022fa8769.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/matching","title":"Matching","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Matching","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The ...","intro-desc":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The system presents one or more strategies for linking similar objects, and indicates the quality of each strategy. Users then only need to approve or reject the suggestions, or adjust them to their needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/ai-and-joule-design/guidelines/media_12416838ad91b023b9bda7657601f468d18982632.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/delete-objects","title":"Object Handling – Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the ...","intro-desc":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the items depends on the structure of the object (simple or complex).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_1420ac552e13b7b375167d6c0dc74f30370306117.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Object Handling (Create, Edit, Delete)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In addition to the basic display option, the following actions are available for objects:","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be ...","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/tables-toolbar","title":"Table Toolbar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Toolbar","lastModified":1780046937,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically ...","intro-desc":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically in the background whenever users add or change information within a business entity while in edit state (auto-save).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_14824efef9dca768e282b67d962819d953809c925.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777300632,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1777300631,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover","title":"discover","version":"","breadcrumbs":"","lastModified":1777300631,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84","title":"v1-84","version":"","breadcrumbs":"","lastModified":1777300631,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design","title":"Designing Intelligent Systems","version":"","breadcrumbs":"Foundations / Designing Intelligent Systems","lastModified":1780065094,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1782336991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1782336992,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, ...","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1782336990,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1777300632,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1782336991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1782336994,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/get-started","title":"get-started","version":"","breadcrumbs":"","lastModified":1777300632,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1782336991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","intro-desc":"[external_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Environment","lastModified":1782336994,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and ...","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1777300632,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze ...","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/frameworks/analytical-frameworks/media_1e18a5087e7f9851da28696b366583b333eacc373.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But ...","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/messaging/media_1c5c24660005cb97f9cd6b309c8878ea12287c90e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784262512,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral ...","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only","title":"sap-s4hana-only","version":"","breadcrumbs":"","lastModified":1777300631,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1782336991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/overview/designing-intelligent-systems","title":"Designing Intelligent Systems","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing Intelligent Systems","lastModified":1780065092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section covers the design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"This section covers the design concepts for intelligent business systems and machine learning in SAP business software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1782336993,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – like emojis, street signs, or warning ...","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – like emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777300633,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"Foundations / Best Practices","lastModified":1780065102,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"UX Role Guidance","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / UX Role Guidance","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for mapping a business role to SAP Fiori, including:","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1782336993,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-products","title":"sap-products","version":"","breadcrumbs":"","lastModified":1777300631,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/ranking","title":"Ranking","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Ranking","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Ranking simplifies complex decisions for business users by showing the best options first.","intro-desc":"Ranking simplifies complex decisions for business users by showing the best options first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/media_17802c166b7e4b6ac057feff2e5f92f82e285265d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1780065098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1782336978,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section outlines the foundations of the SAP Design System for web applications.","intro-desc":"This section outlines the foundations of the SAP Design System for web applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/overview","title":"Designing Intelligent Systems – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / Designing Intelligent Systems – Overview","lastModified":1780065092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1782336994,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and ...","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/recommendations","title":"Recommendations","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Recommendations","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of ...","intro-desc":"Intelligent systems can help users by recommending appropriate content or suggesting an action or input the user may “prefer”. In this case, we speak of a recommendation pattern and its impact on UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/media_1e8ddcce56382a57087a5cb9f95aede02449e1145.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, ICD, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, ICD, and DSC","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The design-led development (DLD) process for S/4HANA, Industry & Cross-Development (ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user ...","intro-desc":"The design-led development (DLD) process for S/4HANA, Industry & Cross-Development (ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/media_10d03a907ee952e1b485df003799825db97bf3e2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe ...","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/media_140a3b854dca57024bb7289d2dd5bef2418909d70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/matching","title":"Matching","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Matching","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The ...","intro-desc":"While manual matching is very time-consuming for users, intelligent systems can significantly speed up matching decisions by using AI methods, such as machine learning. The system presents one or more strategies for linking similar objects, and indicates the quality of each strategy. Users then only need to approve or reject the suggestions, or adjust them to their needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/media_12416838ad91b023b9bda7657601f468d18982632.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1782336991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/whats-new","title":"What’s New in Guideline Version 1.84","version":"","breadcrumbs":"Discover / What’s New in Guideline Version 1.84","lastModified":1782336989,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.84.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.84.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777300632,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Ways of Acting","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Ways of Acting","lastModified":1782336993,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Peoples’ ways of acting are inclined to a variety of cultural aspects that can also influence their day-to-day jobs. The aspects may include e.g. socio-cultural ...","intro-desc":"Peoples’ ways of acting are inclined to a variety of cultural aspects that can also influence their day-to-day jobs. The aspects may include e.g. socio-cultural norms and conditions, beliefs, attitudes to responsibility and initiative, established practices, demograpics and technology trends.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines","title":"Designing Intelligent Systems – Guidelines","version":"","breadcrumbs":"Foundations / AI and Joule Design / Designing Intelligent Systems – Guidelines","lastModified":1780065094,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to establish a feedback loop in intelligent systems.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1782336995,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Culture as we understand it follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/versioning","title":"SAP Fiori for Web – Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1782336990,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent ...","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/sap-fiori","title":"SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / SAP Fiori","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of ...","intro-desc":"SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/media_10203c9efe37f765d5bb8f8adc8bcedfee57c6818.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1784262474,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Get an overview of accessibility features supported by the SAPUI5 framework and what you need to take care of at app level.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/explainable-ai","title":"Explainable AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI","lastModified":1780065094,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of ...","intro-desc":"To help build trust between human and machine, we need to provide sufficient information about the underlying model and the reasoning behind the results of an algorithm. This is even more critical in business applications, where users are held accountable for the decisions they make.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation ...","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/navigation/media_1a1515ddab96bf0060b7cdd17199db24ac5b3ec8f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/situation-handling","title":"Situation Handling","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve ...","intro-desc":"Situation handling is a concept for bringing business issues to the attention of specific user groups. It helps the user to recognize, understand, and resolve the situation by gathering all relevant information and recommending solution proposals.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/discover/sap-products/sap-s4hana-only/media_1e8f9d4420c40c8e895d76b722653bc51ba327f58.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/feedback-loop-in-intelligent-systems","title":"User Feedback","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / User Feedback","lastModified":1779893363,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"When you design an intelligent system based on a machine learning algorithm, the data model it creates is typically dynamic. After being trained with an ...","intro-desc":"When you design an intelligent system based on a machine learning algorithm, the data model it creates is typically dynamic. After being trained with an initial set of data, the model needs to be retrained on an ongoing basis as new data becomes available during usage. This new data also includes feedback from end users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/ai-and-joule-design/guidelines/media_146b496e0ab88f82846d80f5cd338a2a45e40b82d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be ...","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/media_16d8079990c6908a549053fc4ade652e7b22585d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1780065098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Forward / Forward","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you ...","intro-desc":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you can forward one or several objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_15638fe19ef863496cb353f926e41feaab9026da2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777300647,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1c399e258b8a967fb466450cc740d61586c5cd4ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Manage Objects – Create, Edit, Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects – Create, Edit, Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In addition to the basic display option, the following actions are available for objects:","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782337071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Manage Parts of an Object","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Parts of an Object","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1d6141f28a4b48bf3c961d2cd39c458e406d0eb0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Manage Objects with Subpages – Local Flow","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects with Subpages – Local Flow","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the local flow with reference items if your object has subpages and your system setup requires every subpage to be saved separately (different objects, ...","intro-desc":"Use the local flow with reference items if your object has subpages and your system setup requires every subpage to be saved separately (different objects, such as a sales order and contacts). To leave a subpage in edit mode, the user has to save the changes, or discard them. To keep unsaved changes, you need to implement draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_14ba904eeee4e76e6940c777e2e0eb78bb90970be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Manage Objects with Subpages – Global Flow","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects with Subpages – Global Flow","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the global flow with subitems if you want to let the user navigate freely between the main page and multiple subpages in one editing ...","intro-desc":"Use the global flow with subitems if you want to let the user navigate freely between the main page and multiple subpages in one editing session (one object, such as a sales order as the main object with sales order items as closely related subpages). In this case, the subpages do not have an explicit Create or Save button. Any changes to the subpages are saved automatically in the background (temporary save). After editing, the user has to navigate back to the main page to save or discard the changes to all subpages. If you want to keep unsaved changes, you need to implement draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_144ac8a213dc63fa0347c20ad2b0ed689e5800683.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782337071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1780065101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/copy","title":"Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Copy","lastModified":1780065097,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Manage Simple Objects","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Simple Objects","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the flows described below to create, edit, or delete simple objects without subpages. If the object has subpages, use the local flow or global ...","intro-desc":"Use the flows described below to create, edit, or delete simple objects without subpages. If the object has subpages, use the local flow or global flow instead. The main floorplan for managing objects is the object page, but other floorplans are also available, such as the wizard. If none of the existing floorplans fit the use case, you might need to design a freestyle floorplan. For a summary of the available floorplans, see the floorplan overview.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1679a6cbbcdc08b3c31a85c2cb3ddb19354513492.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Mass Editing","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Mass Editing","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing allows users to change multiple (homogenous) objects simultaneously. Usually, these objects are selected from a list or table and have most or all ...","intro-desc":"Mass editing allows users to change multiple (homogenous) objects simultaneously. Usually, these objects are selected from a list or table and have most or all of their changeable facets in common, such as Object Name, Object ID, or Description.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1cd00497f30f149fbe8b3c2649638f264609c4fe0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically ...","intro-desc":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically in the background whenever users add or change information within a business entity while in edit state (auto-save).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/global-patterns/object-handling/media_1e007b8fd8ffe90a778d2ffdf136c4b8fb282611d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1777300663,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"","lastModified":1782337070,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772 and Sunset of the SAP Fiori Client.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported ...","intro-desc":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported in the same way: interaction with a mouse and keyboard as well as by touch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/media_181991c8bd8f95f41457f4f175f559c5b8c3f9bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level ...","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/media_19b4d8acebd404a763b81a18865614e0e2f278d1d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad – Overview","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and ...","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_134f1b6d74ebc2dc85fa77b8fba9946541e32bcae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services","title":"integration-and-services","version":"","breadcrumbs":"","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1780065091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder allows you to browse all SAP Fiori, SAP GUI, and Web Dynpro ABAP apps in one place. It is available in the ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/media_13644b2415a68102744ca17058c5c18d2a0dfb3ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1780065098,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization can be used to modify the display and settings of a table.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/tables/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1777300665,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-spaces","title":"SAP Fiori Launchpad Spaces","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Spaces","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with ...","intro-desc":"With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with the user actions menu.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_1bdb4a1b11e1995db2549f9c7dad40018cd8d68e1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/media_1cf498607f791678a5966719ae61dc47368042ad0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1780065092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Which Selection Control Should I Use?","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Which Selection Control Should I Use?","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support ...","intro-desc":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support dedicated use cases. This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/media_1fbf5806ea6a90aa61abe81230bd18da77eedbf54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual","title":"visual","version":"","breadcrumbs":"","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/colors/quartz-dark-colors","title":"Quartz Dark Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Dark Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/colors/media_14502ab4f6d1a3687f67f65a2395e4672020106de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_1c8f28b272f0ca768f51daf84c83aac56711e703e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain ...","intro-desc":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/tables/media_1e5ba7aab0c660aba18e6962768aed5d2ebc12e37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1780065103,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is the latest visual theme that has been designed for SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data ...","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1780065101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"SAP Fiori Launchpad – Merged Header","version":"","breadcrumbs":"","lastModified":1782337071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1777300663,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/media_1f49304e3714d72ea4dceed1442cd7eb1d81361b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After entering a search term, users can trigger the search by pressing ENTER, by clicking the magnifier icon, or by selecting one of the suggestions. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_1eca8d49e6bc8cb2c6055a09d47787c5a723254fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1780065102,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In general, use long text to display units of measurements, and do not use abbreviations, such as (ISO) codes.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1777300665,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad home page is the first page that users see after they have logged in. It is the main entry point to ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/integration-and-services/sap-fiori-launchpad/media_15ccc0c955369a420535ace35319ca8c22e1a5843.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, ...","intro-desc":"Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1777300663,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage leading and trailing white space (blanks) when copying and pasting text into input controls (such as input fields, text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/media_1e97ed463ceeac3c2a90475ba728c27b06adf710b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1780065102,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance ...","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/best-practices/ui-elements/media_12a30a055ad0ca21d948d309f4862f9cd4d865e19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1777300889,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/iconography/icons","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored ...","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted, hand-hinted, and aligned in font format. The icons are essentially vector graphics which can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/iconography/media_1e9b0821750d18fb6082ea8a1e5db99e8f79ad021.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, ...","intro-desc":"Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is the latest visual theme that has been designed for SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual","title":"visual","version":"","breadcrumbs":"","lastModified":1777300889,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance ...","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported ...","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/media_1c5520d5d4eebc68c8895eb305c6c11a2ab65831a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations","lastModified":1780061422,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different application themes and how they support accessibility standards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1777300889,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"Foundations / Visual / Motion Design","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time ...","intro-desc":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time dimension that makes it an ideal medium for storytelling. In the context of SAP Fiori, motion design and microinteractions work together to provide our users with a coherent user experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/media_1230d6860718a30d55332a0335e98ff4b7ec5728b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38","title":"v1-38","version":"","breadcrumbs":"","lastModified":1777301009,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover","title":"discover","version":"","breadcrumbs":"","lastModified":1777301009,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations","title":"foundations","version":"","breadcrumbs":"","lastModified":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/community","title":"community","version":"","breadcrumbs":"","lastModified":1777301009,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration Concept","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration Concept","lastModified":1782336441,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1782336437,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1782336439,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"Foundations / Best Practices","lastModified":1782336442,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/design-principles","title":"SAP Fiori and Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / SAP Fiori and Design Principles","lastModified":1782336438,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, ...","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/community/newsletter","title":"Newsletter","version":"","breadcrumbs":"Community / Newsletter","lastModified":1782336442,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Fiori Design Newsletter is sent out around once a week and contains valuable information for all Fiori designers, POs, developers and interested colleagues.","intro-desc":"The Fiori Design Newsletter is sent out around once a week and contains valuable information for all Fiori designers, POs , developers and interested colleagues.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/get-started","title":"get-started","version":"","breadcrumbs":"","lastModified":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/versioning","title":"SAP Fiori for Web – Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1782336437,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/frameworks/smart-templates","title":"Introduction to Smart Templates (SAP Fiori Elements)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to Smart Templates (SAP Fiori Elements)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Smart templates provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns. The goals ...","intro-desc":"Smart templates provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns. The goals are to ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of frontend code for building SAP Fiori apps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/frameworks/media_1ca4a07eaf7a0e64e42e22b75a0e512d60347e450.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/frameworks/analytical-frameworks/media_1ffa578a3e0f50d91dd49e16cd739b8cd7bea0bde.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/whats-new","title":"What’s New in Guideline Version 1.38?","version":"","breadcrumbs":"Discover / What’s New in Guideline Version 1.38?","lastModified":1782336437,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"New article! Mass editing allows users to change multiple (homogenous) objects simultaneously. By aggregating all values of each of these facets, users can quickly chose ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1782336439,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with our design principles, design-led development process, and multi-device approach.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe ...","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience. But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/media_1d0af9ab5ced56b03d60aa98b660346536a73a508.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze ...","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/frameworks/analytical-frameworks/media_1488a81d51bde831316de719c5da39e94d08315f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1782336437,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Actions allow users to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. Actions are mostly placed in ...","intro-desc":"Actions allow users to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. Actions are mostly placed in toolbars and follow guidelines that are specific to the UI elements in which they are used.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/media_1d564d702c980634654a640774877939175e13a7a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation / Navigation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation ...","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right mouse click.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/navigation/media_136644e481d6f533ce0bf973d27657fede12e3018.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/get-started/ui5","title":"SAPUI5 Planning & Development","version":"","breadcrumbs":"Discover / Get Started / SAPUI5 Planning & Development","lastModified":1782336438,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Do you want to find out more about SAPUI5? Check out the links below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/community/contact-us","title":"Contact Us","version":"","breadcrumbs":"Community / Contact Us","lastModified":1777301009,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the SAP Fiori Design Community to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/community/media_13a1de90dd4aaa5451983cfa8cf911cafb08ec78d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to display messages to the user such as errors, warnings, success messages, confirmation, and information. You can choose from various controls ...","intro-desc":"This article describes how to display messages to the user such as errors, warnings, success messages, confirmation, and information. You can choose from various controls to display different types of messages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/messaging/media_1ce911b8102211fe195b387da834d3540dcf5f4ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Mobile First","lastModified":1782336439,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating a coherent and enjoyable user experience out of a complex business scenario can seem like a daunting task. One approach to this problem is ...","intro-desc":"Creating a coherent and enjoyable user experience out of a complex business scenario can seem like a daunting task. One approach to this problem is to deconstruct the complexity by focusing on the essentials. “Mobile first” is a great way to facilitate this process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1782336442,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent ...","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/discover/sap-design-system/vision-and-mission/media_144b6748c21bd4b263d7b4a2dc656c9928dbe72ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/copy","title":"Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Copy","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_1b5e3216c291e401104ef41521549fbf4605d067d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Manage Objects with Subpages – Global Flow","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects with Subpages – Global Flow","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the global flow with subitems if you want to let the user navigate freely between the main page and multiple subpages in one editing ...","intro-desc":"Use the global flow with subitems if you want to let the user navigate freely between the main page and multiple subpages in one editing session (one object, such as a sales order as the main object with sales order items as closely related subpages). In this case, the subpages do not have an explicit Save button. Any changes to the subpages are saved automatically in the background (temporary save). After editing, the user has to navigate back to the main page to save or discard the changes to all subpages. If you want to keep unsaved changes, you need to implement draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_14ab814e3cd7762a275eb729dc06a8df4051b24da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782336496,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782336496,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Forward","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you ...","intro-desc":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you can forward one or several objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_1e60b3ff9cd6bbc981c198a03d9c06302a95f76f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Manage Simple Objects","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Simple Objects","lastModified":1782336496,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this flow to create, edit, or delete a whole page or object. If the object has subpages, use the local flow or global flow ...","intro-desc":"[internal_only]Use this flow to create, edit, or delete a whole page or object. If the object has subpages, use the local flow or global flow instead.[/internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_13507ed05e35d7b7015b97f58abfd55477e63ea35.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Manage Parts of an Object","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Parts of an Object","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_17408af3cf54490753d314b31ff1502d87a543a65.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Manage Objects – Create, Edit, Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects – Create, Edit, Delete","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section describes the different interaction flows for managing objects. These flows include create, edit, and delete. They can be used for all floorplans, depending ...","intro-desc":"This section describes the different interaction flows for managing objects. These flows include create, edit, and delete. They can be used for all floorplans, depending on the use case and the type of object being processed, such as:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_17b32e97b88fc2151201613ba0c165390833ced57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Create with Reference","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_10b1ee623f165725b73c7a9d25f2cd406dea679b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Manage Objects with Subpages – Local Flow","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Manage Objects with Subpages – Local Flow","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the local flow with reference items if your object has subpages and your system setup requires every subpage to be saved separately (different objects, ...","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_1f8c2f016cdd8ca0957861d1189eb04c3e16ac931.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically ...","intro-desc":"A draft is an interim version of a business entity that has not yet been explicitly saved as an active version. Drafts are saved automatically in the background whenever users add or change information within a business entity while in edit state (auto-save).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_1236785739f4b44a2f4f153de9b5d59f62eb58368.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1777301041,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1782336448,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data ...","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/media_159219171438d3ca24ec319760ac149963fa8861c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam is the standard collaboration tool in SAP Fiori. There are two ways of integrating SAP Jam into the SAP Fiori experience:","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are two ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/media_1bde1cd6bc6735eff64b4f1880dde29a791c51a2d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1777301042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage leading and trailing white space (blanks) when copying and pasting text into input controls (such as input fields, text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/media_1e97ed463ceeac3c2a90475ba728c27b06adf710b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/media_13b2acf85bd8f3530c29c65f5555534956c0d42fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In general, use long text to display units of measurements, and do not use abbreviations, such as (ISO) codes.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/media_165a2edc37aeb9d11547f8a94d366a06a9805665a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/media_11e065efa434011291d8ba2c3b00a4f9307e8d261.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level ...","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/media_14a0ac30dada8104904fd05d356de75d00b298f07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/formatting/media_153ae2696e29d8fde6c6dd751126d45e5ba75906d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Mass Editing","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Mass Editing","lastModified":1779893363,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing allows users to change multiple (homogenous) objects simultaneously. Usually, these objects are selected from a list or table and have most or all ...","intro-desc":"Mass editing allows users to change multiple (homogenous) objects simultaneously. Usually, these objects are selected from a list or table and have most or all of their changeable facets in common, such as Object Name, Object ID, or Description.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/global-patterns/object-handling/media_186a101e74839d2deee082fd321c392a9c99c61d1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1777301056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services","title":"integration-and-services","version":"","breadcrumbs":"","lastModified":1777301055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1782336449,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/iconography/icons","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Unlike images of icons, the icon font is fully customizable with CSS. Therefore, different themes can be applied.","intro-desc":"Unlike images of icons, the icon font is fully customizable with CSS. Therefore, different themes can be applied.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/iconography/media_1006443553d94490b0b2c7be91d4167a42c26bf39.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1777301055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual","title":"visual","version":"","breadcrumbs":"","lastModified":1777301056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1782336448,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the color system used in SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1782336446,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Run SAP Fiori launchpad as a native mobile application on iOS and Android.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Client","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori Client is a native application runtime for running the SAP Fiori launchpad and applications on Android and iOS devices. It can be downloaded ...","intro-desc":"SAP Fiori Client is a native application runtime for running the SAP Fiori launchpad and applications on Android and iOS devices. It can be downloaded from the Apple App Store or Google Play Store, or installed automatically by a system administrator. Entering the URL establishes the connection to the SAP Fiori server. SAP Fiori can then be used in the same way as in the browser.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/media_1de5d3125f387e845023bdaeb27a46ffb7a35a132.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad home page is the first page that users see after they have logged in. It is the main entry point to ...","intro-desc":"The SAP Fiori launchpad home page is the first page that users see after they have logged in. It is the main entry point to SAP Fiori apps on mobile and desktop devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/media_1976b9d67cb21af881560703dadeb31b31c295644.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1777301056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/colors/colors","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Colors","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color plays a significant role in SAP Fiori. Color communicates importance and association and provides direction to users.","intro-desc":"Color plays a significant role in SAP Fiori. Color communicates importance and association and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/colors/media_1cb9bd2466e1d90b47fd41e87a7a3baa5dd690f19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported ...","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/media_1c5520d5d4eebc68c8895eb305c6c11a2ab65831a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1782336443,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder is the main place for finding SAP Fiori, SAP GUI, and Web Dynpro ABAP apps all in one place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization can be used to modify the display and settings of a table.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/tables/media_1535ab32d12f3c51e5a410c1ce3ddaf6968a4d421.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1777301056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"When the user clicks on the search icon in the shell bar, the search field and the type selector appear. If the search field is ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/media_1d59e1ce17e5e872bdf320b57f254672d9ffda176.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad – Overview","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad – Overview","lastModified":1777301056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/media_17121c3ebe3ec9d7c00afe4c88ce984f051a2aa90.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/services","title":"Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Services","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set app-specific settings for each of the apps in the launchpad. If you implement the API for the settings service, an App Settings ...","intro-desc":"The SAP Fiori launchpad provides apps the following services:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/integration-and-services/sap-fiori-launchpad/media_120aaa0f681762003ba7970f641fd762619fb2738.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"Foundations / Visual / Animation","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, animations are used to emphasize actions, provide orientation, and help users to perform actions by providing transitions and additional multiple actions. The ...","intro-desc":"In SAP Fiori, animations are used to emphasize actions, provide orientation, and help users to perform actions by providing transitions and additional multiple actions. The aim is to improve the overall user experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/media_18ac2cb7b7be62554a7ea411da81b7d590751ffdb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1779893363,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain ...","intro-desc":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/best-practices/ui-elements/tables/media_1db8813eb4eacab80cc9470b4d0b880f0fbdf0012.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types","title":"page-types","version":"","breadcrumbs":"","lastModified":1777301071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans","title":"floorplans","version":"","breadcrumbs":"","lastModified":1777301071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/writing-and-wording","title":"writing-and-wording","version":"","breadcrumbs":"","lastModified":1777301071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/typography","title":"typography","version":"","breadcrumbs":"","lastModified":1777301071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782336505,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Flat Object View Floorplan","lastModified":1777301071,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1f1fa4bc39e24e81a402933b207e3d162585b049a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1782336444,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Write consistent page and card titles, subtitles, and action texts in overview pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1782336444,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations","lastModified":1782336445,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the \"cozy\" and \"compact\" component sizing for touch and mouse interaction.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Create Page Floorplan","lastModified":1782336505,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The create page floorplan is used when a new object needs to be created in a full screen or split-screen layout.Creating an object is a special case for the edit pattern. For details not covered in this article, please refer to the manage simple objects article.Furthermore, this floorplan does not cover the creation of another line item within a screen, so for more information about line item creation, see the local flow with reference items article.The create page floorplan is used when a new object needs to be created. Creating an object is a special case for the edit pattern; for details not covered in this article, refer to the simple objects article. Furthermore, the floorplan does not cover the creation of another line item within a screen, so for more information about line item creation, see the manage complex objects article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_11dca247fdee563c8e4bd650b5ec7de46cd64dd6f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"Page Types / Floorplans / List Report","lastModified":1777301072,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1b58539501569152a8e32422d428dfa773c19c93b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/visual/typography/typography","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography","lastModified":1782336444,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses a set of sans-serif system fonts. Our font stack in CSS includes Arial, Helvetica, and Roboto for Android. These fonts are available ...","intro-desc":"SAP Fiori uses a set of sans-serif system fonts. Our font stack in CSS includes Arial, Helvetica, and Roboto for Android. These fonts are available for all languages supported by SAP Fiori.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/visual/typography/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/create-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The create page floorplan is used when a new object needs to be created in a full screen or split-screen layout.","intro-desc":"The create page floorplan is used when a new object needs to be created in a full screen or split-screen layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/create-page/media_16e9625b9420b2c0dee9c2cbb57550400f1f9c634.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The sections below describe the guidelines for each of these texts.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/writing-and-wording/ux-writing/media_1c62eac3a2e3f1820e52a1bc7afa77c3d87123c3c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1782336457,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the ...","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text. (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/flat-object-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long, scrollable page. The advantage of this floorplan over the object ...","intro-desc":"The flat object view floorplan displays all the information for an object on one long, scrollable page. The advantage of this floorplan over the object view floorplan is that the layout stays the same in both display and edit mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/flat-object-view/media_188871f223b5ea76af410e931e702b1c6b34c8b41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/initial-page-floorplan/media_1349dbdd8f17707ab9bf3e6dfd82520907b751af9.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplan-overview","title":"Overview – Floorplans, Smart Templates (SAP Fiori Elements) and Frameworks","version":"","breadcrumbs":"Page Types / Overview – Floorplans, Smart Templates (SAP Fiori Elements) and Frameworks","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori has a simple user interface hierarchy, designed to support users in the best possible way. In general, the SAP Fiori launchpad is the ...","intro-desc":"SAP Fiori has a simple user interface hierarchy, designed to support users in the best possible way. In general, the SAP Fiori launchpad is the entry point for the user. All the apps available to a user are presented as tiles in the app finder, while the home page shows a personalized view of tiles the user has selected. The shell bar offers an enterprise search and other services, which are available across all apps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/media_1fd26cc9f10a1bd3a312a2f949a6a59194c25d528.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/list-report/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large list of items and take action. This floorplan combines powerful functions for filtering ...","intro-desc":"The list report floorplan allows the user to work with a large list of items and take action. This floorplan combines powerful functions for filtering large lists with different ways of displaying the resulting item list. You can only use the list report floorplan with the full screen layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/list-report/media_197c63e9889610afdb7a07123e4bda1f057b8d933.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/overview-page","title":"Overview Page (Smart Templates/SAP Fiori Elements)","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (Smart Templates/SAP Fiori Elements)","lastModified":1782336505,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a new data-driven SAP Fiori app that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, enabling faster decision-making as well as immediate action.The overview page employs cards (containers of content), which are based on smart template technology, and which act as a UI framework for organizing large amounts of information on an equal plane within the page. The overview page is created by a developer based on annotated views of app data (meaning that app content can be tailored to the domain or role). Information can be visualized in an attractive and efficient way using different types of cards.In short, the overview page is a simple, one-stop, data-driven SAP Fiori app that gives a role all essential information. It allows the user to view, filter, and react to information quickly.For information about how to format texts on the overview page, see Overview Page – UI Text Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object View Floorplan","lastModified":1777301087,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1fb738a96b7608769103770ef24b20f2c6d0768c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782336505,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"A worklist displays a collection of items that are to be processed by the user. Working through the item list usually involves reviewing details of the list items and taking action. In most cases, the user has to either complete a work item or delegate it.The focus of the worklist floorplan lies on processing the items. This differs from the list report floorplan, which focuses on filtering content to create a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"Page Types / Floorplans / List Report (Smart Template / SAP Fiori Element)","lastModified":1777301088,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1be58ecaf3648bab4a57b0a8eebad99d1c9b5ee6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/object-page","title":"Object Page (Floorplan + SAP Fiori Element)","version":"","breadcrumbs":"Page Types / Floorplans / Object Page (Floorplan + SAP Fiori Element)","lastModified":1782336505,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan allows the user to display, create, or edit an object. This is now the recommended floorplan for representing both simple and complex objects in SAP Fiori, and is set to replace the and object view floorplan. The object page floorplan comes with a flexible header, a choice of anchor or tab navigation, and a flexible, responsive layout. These features make it adaptable for a wide range of use cases.You can implement the object page floorplan in two ways:                     Use the pre-built SAP Fiori element (formerly known as a smart template). This implementation uses OData annotations, and allows you to speed up development if the supported feature set matches your requirements.                     Implement the floorplan yourself using the respective SAPUI5 controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/smart-template-list-report/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart template list report floorplan is an instance of the general list report floorplan implemented as a reusable template. The list report floorplan allows ...","intro-desc":"The smart template list report floorplan is an instance of the general list report floorplan implemented as a reusable template. The list report floorplan allows users to work with large lists of items and take action. The guidelines for the list report generally apply. Existing deviations and limitations are listed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/smart-template-list-report/media_150e70a11add0b7c82309891ab594b323a1ec3617.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/object-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects in SAP Fiori. It can either be embedded in a master-detail app (as in typical approval ...","intro-desc":"The object view is a floorplan for displaying objects in SAP Fiori. It can either be embedded in a master-detail app (as in typical approval apps) or shown as a full-screen page. This floorplan offers optimal support for multiple devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/object-view/media_155731e6730386696bb0ad55842bc3d6f4bd0c800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/object-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object page floorplan allows the user to display, create, or edit an object. This is now the recommended floorplan for representing both simple and ...","intro-desc":"The object page floorplan allows the user to display, create, or edit an object. This is now the recommended floorplan for representing both simple and complex objects in SAP Fiori, and is set to replace the and object view floorplan. The object page floorplan comes with a flexible header, a choice of anchor or tab navigation, and a flexible, responsive layout. These features make it adaptable for a wide range of use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/object-page/media_12d9f4e322f9f69ad43330b6378dd93b5ca5f2668.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The overview page (OVP) is a new data-driven SAP Fiori app that provides all the information a user needs in a single page, based on ...","intro-desc":"The overview page (OVP) is a new data-driven SAP Fiori app that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, enabling faster decision-making as well as immediate action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/overview-page/media_1125b1b1fbef77b960adb7e20287ea8b413f9c050.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts","title":"page-layouts","version":"","breadcrumbs":"","lastModified":1777301101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/resources","title":"resources","version":"","breadcrumbs":"","lastModified":1777301101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Full Screen Layout","lastModified":1782336505,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The full screen layout lets you exploit the full width of the screen. Use this layout for apps that need to display large amounts of data, large visualizations, or wide tables.Avoid switching between full and split-screen layouts within an app. If your app has some screens that require the full width, and others that do not, try to stick to one layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/media_1d38fbfea3dfbbf597621ee3959d88b31c2d6e03b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Grid Layout","lastModified":1782336450,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/grid-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori has embraced the new measuring system using the ‘rem’ unit, which stands for ‘root em’. A base size of 16 pixels defines 1 ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/grid-layout/media_1d68c3caa5a8ee459ef87b01d5462565b20045b86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Handling Floorplan","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Handling Floorplan","lastModified":1782336505,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance handling floorplan allows users to open multiple documents in a tabbed view. After selecting items from a list, the user opens them in a tab container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_114d0d5981529bc3d9c913e6854bb6da5d9cdda77.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782336506,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Split-Screen Layout","lastModified":1782336505,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The split-screen layout is optimized for displaying and processing a list of items. On the left, users can quickly scan and navigate through the list. On the right, they see the details of the selected item, and can trigger related actions or edit the data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List item behavior and interaction is similar for all list item variants and is therefore described in the list overview article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/action-list-item/media_1ad0929556fa72ebd21264208080dfb03e9efe01c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet lets you to display a list of actions for the user to choose from. You can also cluster actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1be9b5a857be7fc16284e6d2c1333f96dae231b5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1df88a5720d7ac635329068276455cd55d519cedb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1782336506,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"An analytical table, also known as an ALV or ULV, contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.In contrast to other tables, the analytical data binding used by the analytical table allows an aggregated number to be shown automatically in a cell. This means that a number in such a summarized cell is a total sum of several lines in the database.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777301101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance handling floorplan allows users to open multiple documents in a tabbed view. After selecting items from a list, the user opens them in ...","intro-desc":"The multi-instance handling floorplan allows users to open multiple documents in a tabbed view. After selecting items from a list, the user opens them in a tab container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/multi-instance-handling-floorplan/media_1a706941f291eb97f41417d6a7817780f25f7774d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/floorplans/work-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A worklist displays a collection of items that are to be processed by the user. Working through the item list usually involves reviewing details of ...","intro-desc":"A worklist displays a collection of items that are to be processed by the user. Working through the item list usually involves reviewing details of the list items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/floorplans/work-list/media_108b8a1f5bb994e8ecd48d077ded2894bb37cc402.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/full-screen/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout lets you exploit the full width of the screen. Use this layout for apps that need to display large amounts of ...","intro-desc":"The full screen layout lets you exploit the full width of the screen. Use this layout for apps that need to display large amounts of data, large visualizations, or wide tables.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/full-screen/media_10b3fc3b19e27ce0f1f85daa08843f35cc9303e5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/split-screen/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split-screen layout is optimized for displaying and processing a list of items. On the left, users can quickly scan and navigate through the list. ...","intro-desc":"The split-screen layout is optimized for displaying and processing a list of items. On the left, users can quickly scan and navigate through the list. On the right, they see the details of the selected item, and can trigger related actions or edit the data.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/split-screen/media_124be8858e0fa062a1943c5afe9450ddbb11552bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/page-types/page-layouts/letter-boxing/media_1b5d59190edf3700d635f094ff556d104370e1d3e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/resources/downloads","title":"Design Stencils","version":"","breadcrumbs":"Resources / Libraries / Design Stencils","lastModified":1782336450,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":":download-blue: Download Design Stencils (Axure RP) and SAP Icon Font","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An action sheet consists of a list of options from which the user can select to complete an action. Actions can be clustered if there ...","intro-desc":"An action sheet consists of a list of options from which the user can select to complete an action. Actions can be clustered if there is not enough space on the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/action-sheet/media_1ab7ae685f3b81b19d02a2ead622c42eed5e5d3b6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consist of two areas: a header area that displays the aggregated value of a key measure ...","intro-desc":"The analytical card is used for data visualization. It consist of two areas: a header area that displays the aggregated value of a key measure (KPI), and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/analytical-card/media_1373795828197b50047fbeed00b130f350adc7c16.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1777301119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c75b37709a94e06b4888bb04dc9ce1f23e2e8822.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/barcode-scanning-mobile-integration","title":"Barcode Scanning","version":"","breadcrumbs":"UI Elements / Barcode Scanning","lastModified":1782336455,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1777301119,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1d9f5ba4810d7cd1917c73380034c3dcd91a28cf2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1777301119,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb is a type of secondary navigation that indicates the position of a page in a hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_12ae6343e60ce4d2476cd51313af9be064b7aa666.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1777301119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1d15367afbd5eeb7ddc2eac13772d5f02d924dade.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/busy-state/media_15ce8ab11042c1588a02c7757574e7a65553f126f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/busydialog/media_16331a71cc45abacad111f73ac7af2309cd13b9a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy, specifically in a ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy, specifically in a drilldown scenario of object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/breadcrumb/media_1b844ce2fec4a6d0340dbe5696c738c3824906cdc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1782336452,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ongoing operation covers only a part of the screen with multiple controls, and:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/busy-indicator/media_134ece7dbde9063c9662182e4cd1d5a6ba2a032b7.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/bullet-chart/media_12e487c09968dc31e01b3c9bc821a67f5566295e1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/barcode-scanning-mobile-integration/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/barcode-scanning-mobile-integration/media_1c315672b431d46922f83ba43ecb28ed61c3cc193.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/analytical-table-alv/media_12834fb7ca2b02bb5e15e2f8c29b64e885227b5a5.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/cards/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777301134,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/cards","title":"Cards","version":"","breadcrumbs":"UI Elements / Cards","lastModified":1782336450,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Semantic Patterns","lastModified":1782336507,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:                     Actual Values: What values are (solid pattern).                     Projected Values: What values might be (dashed line, hatched areas).                     Reference Values: What values should be (dotted line with empty circles, empty areas).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Number and Time Format","lastModified":1782336507,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1782336508,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts.The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in Size of the Chart Container).The toolbar is mandatory. Small charts such as dashboards, table cells, and small frames are an exception to this rule. In these cases, the developer must provide a consistent UI to enable action on the chart.The toolbar is always placed on top of the chart. It provides actions such as multiple box selection for selecting dimensions, full screen format, personalization actions, and a toggle function for showing and hiding legends.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1777301133,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons allow users to trigger actions – either by clicking or tapping the button, or by pressing a corresponding key.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_143f223d7d3e113733b88991439888874a76b23ec.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart/media_1ceedb9a2b702f54c4ff270b79bd653cdb83f70bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe","title":"chart-vizframe","version":"","breadcrumbs":"","lastModified":1777301134,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1777301134,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the VizFrame control to display different types of chart that are both interactive and responsive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1dcdce6efed27eeccc05393649484fabf6cfe7802.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1777301134,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval control displays a range of days in a single row, saving on horizontal space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1ad9c273d8d57ac1ea98ee2c897b91d9115724e0d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interva l displays a range of days in a single row. The control allows the user to select a single day, multiple ...","intro-desc":"The calendar date interva l displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the previous and next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/calendar-date-interval/media_169c8de01009a165ffaf2fe12a68ce1d722b38a34.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter or ...","intro-desc":"Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter or the space bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/button/media_1f3a8f0763202cdbc785a32c14111ae3f25aaeb98.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1784927591,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-toolbar/media_1655d6b634b90336304a70ae1462fff8b55307635.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type","lastModified":1782336506,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type","title":"choosing-the-correct-chart-type","version":"","breadcrumbs":"","lastModified":1777301151,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Comparison","lastModified":1782336507,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation through Time page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Deviation","lastModified":1782336507,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category.All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1782336446,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Part to Whole","lastModified":1782336507,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1782336507,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-value-based-legend","title":"Chart – Value-Based Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value-Based Legend","lastModified":1782336506,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Correlation","lastModified":1782336507,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.Scatter charts and bubble charts are the most frequently used charts to visualize a correlation, although using a line chart or bar chart side-by-side is also an acceptable solution.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/media_15b4ae82828cd3975a76d4157e76409f3e0e4379b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/media_1ffb07584a6f2a09d79aa46fdb0b418d6faa3b341.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Time Axis","lastModified":1782336506,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, days, hours, minutes, and seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"[internal_only]","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-time-axis/media_145a600a425a7b70ad8048e4cff8a9b6ac11ff7fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choose-the-correct-chart-type/media_11f4f7f0ddf0b67583e5dbff73c7ed950a77a5e6f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301151,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can change the number of segments from two to nine. The corresponding value ranges are automatically calculated and assigned to each shade. However, you ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/chart-value-based-legend/media_1064547f6fbc25c8156337b73eb1d04ba51721bdc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/media_1448f62b85ee0adebfe6db4a6a6ca56083aea2853.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/media_138c2fb9fad09883956f59b10b408e0035f2048cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation through Time","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Variation through Time","lastModified":1782336499,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article illustrates the different ways you can visualize changes of measures through time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.Time Category and Time AxisBy convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations. We recommend using the time axis which has three main advantages:                     It allows you to display dates and times in a responsive manner.                     All the complexity involved with formatting the axis labels is automatically taken care of.                     The physical spacing between the data points accurately respects the time scale, as opposed to just displaying them equidistantly.                     Additional CategoriesIn addition to the time category, there are additional categories that contain an intrinsic order and that that carry the notion of progression or trend.For example, age, time period, or a rating.As such, the rest of this article also applies to these categories.Column or Line Chart?                     Use a line chart if you want to emphasize the trend through time.                     Use a column chart if you want to emphasize the values themselves.                     In the figure below, you can see that the trend of the values immediately stands out in the line chart, while we need to make an effort to visualize the trend of the values in the column chart. At the same time, the values can be compared more easily in the column chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/reference-lines","title":"Reference Lines","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Reference Lines","lastModified":1777301166,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Add reference lines to highlight a particular value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1d4f77b65280f9fc8b94a886f66a6fbbbd43cb641.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Legend","lastModified":1782336498,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1782336499,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Selection","lastModified":1777301166,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes the different ways users can select one or more data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_13084554fdf52e62a852a59cba134861268edc6dd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A reference line can be added to highlight a particular value. Reference lines can be added only to continuous axes, but not to categorical axes.","intro-desc":"A reference line can be added to highlight a particular value. Reference lines can be added only to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/reference-lines/media_1920d546e50f78dc48b7952cd384ab3d8d5086384.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Ranking","lastModified":1782336499,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Bullet Chart – Color Use for Primary Values","lastModified":1782336498,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article provides guidelines for using color to indicate primary values in bullet charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Scrolling Direction of a Chart","lastModified":1782336498,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes the three types of scrolling direction for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the three types of scrolling direction for charts.","intro-desc":"This article describes the three types of scrolling direction for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/media_1d670b54cbfc0636915aa5c12e5a3af9e4de0b238.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Popover","lastModified":1777301166,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The chart popover displays information or actions related to the selected data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_17392967a4b8c10812c9712fdbbbf37cf095ef0aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/media_1b247b2698cdfa7012e645aa83a7ef35c231ca787.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/colors-for-primary-bar-only/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides guidelines for using color to indicate primary values in bullet charts.","intro-desc":"This article provides guidelines for using color to indicate primary values in bullet charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/colors-for-primary-bar-only/media_19b551bbb3c3c8378918696bef9fd0acec5ad7e18.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/legend/media_1600c178dfdfab1bcef3d041062151cce9868d8ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/selection/media_112b70756480546e619367431f41caf93cf33c9fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/color-palettes/media_110ae4a44b1ffb64ee40d61435ce0279d39a8b0bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/color-palettes","title":"Chart – Color Palettes","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes","lastModified":1782336499,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Embedding","lastModified":1782336499,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures through time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures through time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/media_15f8c0ffcc00e128bebc33a3ba483f16df547a768.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A popover is used to display information or an action related to the selected data points. By default, the chart component:","intro-desc":"A popover is used to display information or an action related to the selected data points. By default, the chart component:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/pop-over/media_15c88ce5cf81a8400f7752a9a6cf6b58af81d89a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1782336504,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). In this case, there is an idea of a progression or a trend, and the best way to represent these values is to use the horizontal axis.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Size of the Chart Container","lastModified":1777301180,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The property \"autoAdjustHeight\" helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1b559114bed77c670f06ad86c970851c850079923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Zoom","lastModified":1782336498,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/values-and-names","title":"Chart – Color Palette – Values and Names","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palette – Values and Names","lastModified":1782336498,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page provides all the color names in the chart palettes.Use Names – Do not use HEX values!Colors are defined by names in order to support our theming capabilities. They are derived from themable base colors and then the associated HEX values depend on the current theme.You cannot change the HEX values unless you create a new theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1782336499,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1782336500,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks or taps the checkbox, it toggles between checked and unchecked.Checked means that the state described by the checkbox text applies, or that the item has been chosen.The checkbox text describes the positive action (as in “true” or “yes”).The text can be either a label control to the left of the checkbox, or a checkbox text that appears to the right of the box.                     If there is only one checkbox, you can use a label or text depending on the form format.                     If there is more than one checkbox, the label describes the whole group of checkboxes. In this case, use the text property of the checkbox to describe the individual checkboxes.                     Within a group of checkboxes, each checkbox can be checked or unchecked. The user can check multiple options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"UI Elements / Contextual Filter","lastModified":1777301181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1ab76372d7ebf97e975c664dbfe919a64ddbb6081.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). In this ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). In this case, there is an idea of a progression or a trend, and the best way to represent these values is to use the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/column-chart/media_13521cca478d9c39aceba2cd435b63043983aa25d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/contextual-filter/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The contextual filter allows you to show a prefiltered view of a list, such as a master list.","intro-desc":"The contextual filter allows you to show a prefiltered view of a list, such as a master list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/contextual-filter/media_17cb506c4e50686bd6d213cb8f363649d4ff7e93d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1782336497,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color names in the chart palettes.","intro-desc":"This page provides all the color names in the chart palettes.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/chart-vizframe/value-display/media_1e1547049cfd3343228b6729a0744ac702772143d.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks or taps the checkbox, it toggles between checked and ...","intro-desc":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks or taps the checkbox, it toggles between checked and unchecked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/checkbox/media_144ffb83b6cbf15b640018cad90dd15c4b70f3ee5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/combo-box/media_117a3f187d0e2898a1aa17092a3006cafcf2b1482.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1782336500,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or a response. It is a forced decision or a confirmation that needs to be signed off by the user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1782336503,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows                     content in the form of labels and text.As forms                     are generally the preferred control for combining labels and                     fields, display list items are seldom used.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1782336501,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that allows additional content, such as a timeline, chat, or additional information, to be displayed in a way that flexibly adapts to different screen sizes. App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1782336504,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1782336504,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1782336501,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.Use this control if the user needs to enter a single date or a date range. The control also allows users to navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/filter-bar","title":"Filter Bar / Smart Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar / Smart Filter Bar","lastModified":1782336502,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1782336501,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/display-list-item/media_12a70acc71f15cac7cce4ff79d8ff4cd626b291fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/currency/media_1d28c1587b39a244e8052938b50094f2cd3a1f4c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and ...","intro-desc":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/date-picker/media_12dea6914ae8a31db78ddade4c4a562b1bb35ea5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a layout control that allows additional content, such as a timeline, chat, or additional information, to be displayed in a way ...","intro-desc":"Dynamic side content is a layout control that allows additional content, such as a timeline, chat, or additional information, to be displayed in a way that flexibly adapts to different screen sizes. App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/dynamic-side-content/media_1d7ad53bd025ac42c95481563f95d6c3cc22f2c71.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or a response. It is a forced decision or a ...","intro-desc":"The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or a response. It is a forced decision or a confirmation that needs to be signed off by the user.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/dialog/media_1ed2a4c398b3243e0e83fa11e9d18de0a581b3bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/date-range-selection/media_10c7756e5282f8d935c024d27dfac42a83ab9477f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/feedinput/media_17e1be0e1912a7d373d49ba5b5b34c81cbdcde1df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of ...","intro-desc":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/filter-bar/media_1586ed0e7b3e57dddeb1ce7a541054cf1a0c72fa8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/form","title":"Form","version":"","breadcrumbs":"UI Elements / Form","lastModified":1782336503,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.In SAPUI5, forms can be built using three different controls:                     Form – sap.ui.layout.form.Form (API)                     Simple form – sap.ui.layout.form.SimpleForm (API) Smart form – sap.ui.comp.smartform.SmartForm (API)                     With a form, you can easily layout a list of properties and input fields. A form is structured into form containers. Each form container consists of form elements. And each form element consists of a label and an input field.The simple form control gives you the possibility to achieve the same result as with the form control, but in a much easier way. Inside a simple form, a form control is created along with its form containers and form elements:                     The layout and structure are defined by the content that is entered.                     Form containers and form elements are created automatically according to the content type. A title (sap.ui.core.Title (API)) automatically starts a new form group (form container), and a label (sap.m.Label (API)) automatically starts a new row (form element).                     All other controls following this label will be assigned to its row (form element). The smart form control belongs to the new set of smart controls. Smart controls give developers the possibility to build UIs without the need to build a complex UI code (the term “smart” refers to the annotations that add semantics and structures to the provided data). The goals are to ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of front-end code for building SAP Fiori apps. Compared to the corresponding standard controls, however, the settings may be limited.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1782336501,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer bar always appears at the bottom edge of the screen.The control is used for main actions that impact the whole page and is always visible except in the home screen and if the empty page is shown. One main advantage of the footer bar is, that this bar is always visible and will not scroll away.Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right aligned.Buttons are sorted from very often used to seldom used. This ensures that the most important buttons will go last into the overflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1782336501,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The flag icon is used to flag objects for later reference and follow-up. The favorite icon is used to mark frequently needed objects as favorites.In order for a business object to be flagged and/or be marked as favorite, the properties markFlag and markFavorite should be set to true. To display both indicators, set the property ShowMarkers to true.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flag icon is used to flag objects for later reference and follow-up. The favorite icon is used to mark frequently needed objects as favorites.","intro-desc":"The flag icon is used to flag objects for later reference and follow-up. The favorite icon is used to mark frequently needed objects as favorites.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/flag-and-favorite/media_13a9051da90a67f2fe3e4dc10e4f608e2d12405ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer bar always appears at the bottom edge of the screen.","intro-desc":"The footer bar always appears at the bottom edge of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/footer-toolbar/media_15f3893294cf69ab663ac3d57155a56a3f977c6a6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/form/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301215,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/form/media_1a788236041f54a152e00212d3686de6c2294e3fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1782336503,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1782336500,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.There are two key use cases:                     You want to let users navigate between different object facets in the object details area. You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute. In both cases, the user switches between tab pages by clicking or tapping the respective tab.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1782336502,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/input-field","title":"Input Field","version":"","breadcrumbs":"UI Elements / Input Field","lastModified":1777301232,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_168640df3ccffba70615ba464269dbd6ab9697764.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1782336500,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation within SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.For more information on the messaging concept for SAP Fiori apps, see the article on message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the ...","intro-desc":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/image/media_1d2a9e62ea4df37f7278b9ab2c1e595a1fff474cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in ...","intro-desc":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/generic-mask-input/media_16faab874513297e281a9d4460c3b4f2da59a300a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1782336502,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1782336500,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:                     Filter criteria: The infobar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the infobar if no filter is applied. Selected items: In a multi-select dialog, the infobar shows the number of selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_18ef09bf3c4d072904b05c2e4fd942d00d05e7e64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation within SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation within SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/form-field-validation/media_1f3b5456752a23d119776e2cd8c9f0ac3b021725a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/infobar/media_18dd9409d7e93e36a267d5704a9d777bd68c9ef62.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation ...","intro-desc":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/icontabbar/media_17c533160e432a7a13e23d9b969cf6a57335693e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you ...","intro-desc":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/input-field/media_12ddfd6b4221448bc0b77b6a8c57e6213e0785c3b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/grid-table/media_163cae9708e609a37ea5f4f1b892e40f2eb4e1ff7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/interactive-chart/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777301246,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/label-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777301246,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301246,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/input-list-item/media_104778a8d85fde81c4d1e5892ec0525c9482e4db3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1782336500,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list section of the master-detail floorplan and in popovers or dialogs, although they can also be used in full-screen floorplans in certain use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1782336503,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label (Web Component)","lastModified":1782336455,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1782336498,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of                     input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"UI Elements / Master List","lastModified":1777301247,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1b37a9625babcc1914cd35ef307dd6ab9370de047.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1782336502,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1782336456,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1782336503,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of                     related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links ...","intro-desc":"A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links are visualized to stand out from standard, non-clickable text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/link/media_1572d3cfc56f7d1b0e68287d37481e6bfcc44c724.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to ...","intro-desc":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/invisible-text/media_1c4df5c5c94dac92624bdfe621285439ef17fb255.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782336500,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links are visualized to stand out from standard, non-clickable text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301246,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To indicate that a field is mandatory, you can set the property “required”. An asterisk will be automatically set in front of the label.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/label/media_1618906b9147d470d14cfe59adef14267acba2be8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list section of the master-detail floorplan and in popovers or dialogs, although they can also be used in full-screen floorplans in certain use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/list-overview/media_18f61491168a4e7c58cf066e4f8c96057cb884576.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/master-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list pattern is part of the split-screen layout. It allows users to scan, select, and navigate the list items to be displayed in ...","intro-desc":"The master list pattern is part of the split-screen layout. It allows users to scan, select, and navigate the list items to be displayed in the details area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/master-list/media_1f4b0c5443b0d8702f26b63d9af0a56fc3def16de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1782336502,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"UI Elements / Message Page","lastModified":1777301261,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_102b4473ab3c24ec01370227bd3ed9d65eef3a5b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1782336503,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).Several chart types are available: bullet chart, trend chart, column chart, comparison chart, and harvey ball chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip is a contro that is used as an information bar. It contains information about an object or a status and can be ...","intro-desc":"The message strip is a contro that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/message-strip/media_1b8e073ffc07568b02ab43ff65a7d487c616d1839.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/message-toast/media_10d9ce04eb8c656a23cfca720245a84762a592334.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/menu-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The menu button differs visually from a regular button by featuring an expand icon, which triggers a dropdown menu (sap.ui.unified.Menu). By default, this menu is ...","intro-desc":"The menu button differs visually from a regular button by featuring an expand icon, which triggers a dropdown menu (sap.ui.unified.Menu). By default, this menu is positioned below the button, but it can also be displayed above if there is not enough space.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/menu-button/media_14d935990f927bf9db72bcdf16930eba4cbc1be51.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1782336500,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a contro that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"UI Elements / Menu Button","lastModified":1782336502,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"The menu button differs visually from a regular button by featuring an expand icon, which triggers a dropdown menu (sap.ui.unified.Menu). By default, this menu is positioned below the button, but it can also be displayed above if there is not enough space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_14b7b18194a7fd2e0a928531f8e314800eba38f52.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1782336501,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multiselection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1782336503,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1782336504,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover (sap.m.MessagePopover) control can                     handle multiple messages within SAP Fiori. In combination                     with a message manager, it automatically displays                     messages that occur after validation points.With the message concept, we now provide a way to centrally manage messages and show them to the user                     without additional work for the developer.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/micro-chart/media_14af698995b8e326f8a204c088972632c6cc29c79.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases ...","intro-desc":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases in which a message page can be shown. The layout is the same, but the text and icon can change depending on the use case. You can use the message page in the following situations:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/message-page/media_10dca7c7c28451e249079c47f57819ed816a08e21.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301262,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover (sap.m.MessagePopover) control can handle multiple messages within SAP Fiori. In combination with a message manager, it automatically displays messages that occur after ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/message-popover/media_16dddeec21e7a5b27d9b85dc799aa55aa1a64c2c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/message-box/media_1d99f3208211f51542edcec1dbfd82e593a64bb57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable ...","intro-desc":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multiselection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/multi-combobox/media_1b8716124a4c9621645d4640be981e0b07a391086.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/output-management/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777301279,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1777301279,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_17eb44ff80b8137e080f6c00e4454e7d7b961527d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"UI Elements / Object Header","lastModified":1777301278,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1b4fe2816564db92e39f55f4d698b2f5a59a812b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1782336435,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1782336496,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. These can be displayed in single and multiline mode. To help the user enter a valid value, you can enable the autocomplete suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782336496,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display component: object status, object identifier, object number and object marker.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1777301279,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_18f5b917086190553714fc623a67cb7b6f6fd8db8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1777301279,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_126ca080cad7de2e9b2a5919204aecef23ea7bb2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item is mainly used in the master list of SAP Fiori apps, where it primarily offers a quick overview of an object ...","intro-desc":"The object list item is mainly used in the master list of SAP Fiori apps, where it primarily offers a quick overview of an object within a list. The text sizes are limited (before the text truncates) and object list items usually allow the user to navigate to the details of an object. Therefore, the object list item should only contain essential information that is necessary for the user to identify which object to work on first. Long descriptive texts should be avoided.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/object-list-item/media_18f61491168a4e7c58cf066e4f8c96057cb884576.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/p13n-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:","intro-desc":"The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/p13n-dialog/media_15fec4161b09873400c211e23dd1c39070e4ae1eb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/object-header/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301279,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header usually represents an object instance. As such, it contains the most important information a user needs to see in order to understand ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/object-header/media_16c7c9be173456fa046acfef29cfee831be55c5dd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display component: object status, object identifier, object number and object marker.","intro-desc":"There are four types of object display component: object status, object identifier, object number and object marker.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/object-display-elements/media_160c5e2fcb3f628e6e306f776d1de020f64819d56.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. These can be displayed in single and multiline mode. To ...","intro-desc":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. These can be displayed in single and multiline mode. To help the user enter a valid value, you can enable the autocomplete suggestions feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/multiinput/media_1938aaee1c0aec261a4b331e6ab59cb4426c17d60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","intro-desc":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/panel/media_12fd0b486ef640871243262037fb92001e4611b8f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1777301294,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The range slider enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_15558eb0ca26fcfebbcda4a1a07a9b149b99e4d1c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1777301294,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator shows the current completion status for a business process (static value).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_19b619cb815f8ef85e086e9b1c2e0979ac9189817.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1777301293,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A popover displays additional information for an object, and can also offer actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1b930eb8c7ef711476eeb78265e2c55e5f9e2d39f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1777301294,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the rating indicator to let users rate content, or to display a content rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_11c7cda4441e832828a7eb56e3189fc1d80741cb0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1777301294,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_10bd8e35033f523b65aac4b5019fa93df3a1045b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1777301293,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the process flow control to represent the stages in a business process (such as approval).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_14b8106ca39f251dd476baada65b119d47384a53d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/quickview/media_17a2e5f7547aff8687f01919e867aa369fbd35350.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1777301293,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see parallel appointments and create new events.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1280f87dba644d676564ab60e75b90b1eeaf40acf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1777301294,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1511d998ce22a8e06ad8b1c18853e5dfbc776ab60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301294,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the range slider if you want to select a value range in a predefined numerical interval. If you want to specify only a single ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/range-slider/media_1bd7fa037037c8a93a30a25502d1c49fb0573bb39.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such ...","intro-desc":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/popover/media_141761fe01369940dafa17506f60a3753d80d34dd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/radio-button/media_16f6cc48f15516287f9e9e9fbb68a76790c499d1c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301294,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator runs on all form factors and therefore works on all devices. It is embedded in a container and thus behaves as part ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/rating-indicator/media_1f7bcfd0d600d0b060ed0ca09b84cc00d75f30a9a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color ...","intro-desc":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/progress-indicator/media_1760f46f26c66b74c58bb423aaa9a359af09b4e42.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new events. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new events. It allows the user to display appointments for several objects, such as a team calendar, and compare them with each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/planning-calendar/media_15bbab9d8ce4cd61d6b7facc07fc0aa7e9dc36dea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/process-flow/media_101122957487bd0c00080a868de9a85f9a7cc47b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/shell-bar","title":"Launchpad Shell Bar","version":"","breadcrumbs":"UI Elements / Launchpad Shell Bar","lastModified":1782336508,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The launchpad shell bar is part of the SAP Fiori launchpad. It contains the Home icon, the enterprise Search icon, and the Account / Settings button, as well as an area for branding purposes. The launchpad shell bar is always available above SAP Fiori apps.The shell bar is provided by the SAP Fiori launchpad. It is automatically shown above the apps when the SAP Fiori launchpad is used.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1777301327,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive and searchable list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_16ab7a5506682c5c242cc732071dc430b34804103.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1777301327,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The smart link triggers a popover with additional information and links to related apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1175715c436a0d7e91e230fea486b109e4970a836.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar Annotations","version":"","breadcrumbs":"UI Elements / Smart Filter Bar Annotations","lastModified":1782336451,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The smart filter bar is a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1777301327,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_17b826d92cc46ba8b148149bc8adb19ef64de548b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"UI Elements / Object Page – Snapping Header","lastModified":1777301327,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1aec715417267e40ac0a4fba94ade7cb563d024e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1777301326,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1bb6de3304ca942287ca63777c7c6a7eaf8f1210c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1777301327,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table is a wrapper for SAP Fiori tables that lets you reuse back-end data structures and generic features.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_112ecdbc94b849e92f41c1b68a9fa3a53d3e9123c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The launchpad shell bar is part of the SAP Fiori launchpad. It contains the Home icon, the enterprise Search icon, and the Account / Settings ...","intro-desc":"The launchpad shell bar is part of the SAP Fiori launchpad. It contains the Home icon, the enterprise Search icon, and the Account / Settings button, as well as an area for branding purposes. The launchpad shell bar is always available above SAP Fiori apps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/shell-bar/media_13f86d1dfa5fb26ada3e15a85dd4037d439afdfd5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301327,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The slider itself is not responsive. It adjusts to the responsiveness of its parent container by recalculating and resizing the width of the control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/slider/media_14b3b711e2eae90085df49852e17f0bcdf5136bae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/select-dialog/media_1053c997bc8172e466ba2d8b8337b467de360e500.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Similar to the quick view, the smart link triggers a popover from a text link. This popover offers links to related apps for the user ...","intro-desc":"Similar to the quick view, the smart link triggers a popover from a text link. This popover offers links to related apps for the user to take action, and shows the user additional information such as simple object details.\nThe smart link is a smart control. It uses metadata annotations to offer the user specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/smart-link/media_1f53d73164b73cd408c5a35698e7260e0b2737f7a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/select/media_14f19e13da809d8e80ea3649120d8098056030aa9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/smart-filter-bar-annotations/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301327,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar is a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/smart-filter-bar-annotations/media_1f63b19fc27e7fb036d9982d3d1078ea9c0195d46.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/snapping-header/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is the uppermost element of the object page layout. It summarizes selected data and actions in a visually prioritized position to let ...","intro-desc":"The snapping header is the uppermost element of the object page layout. It summarizes selected data and actions in a visually prioritized position to let the user quickly grasp the most relevant information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/snapping-header/media_100651ca5a7f7d9eec5012029492fe848766a43d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.","intro-desc":"The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/smart-table/media_1b2c9f01f386dd447f18eafd34f5e5546317d7aa9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1777301311,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table is the default table in SAP Fiori. It supports various features at line item level.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1a9939fe9aa428737c6c3697c8ea833e7bf5bbe12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782336497,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301313,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/search/media_17c2220e19bb62e8992a2c896ca86090bd6d35679.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1777301312,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The search field enables users to search for information or filter data by entering key words as text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_146adfe436edcc469bd9083cf599962333aeafcfd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The ...","intro-desc":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/responsive-table/category-navigation/media_1d2748f21ca2f01290824d862110a1870cb4f14cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, ...","intro-desc":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/responsive-table/media_1964ed4e72e2393a5a919c5f3c0cd5098ee343f0b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1777301342,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_139f0673721fc998be3c3394ec581b8d3bb3a3b60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input (Web Component)","lastModified":1777301342,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1af37aea2cf61df56f80f341a7d74f2174ac5ed37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/step-input-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777301341,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1782336508,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally                     contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1782336508,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch that allows users to turn things on or off. With the swtich, single settings options such as personalization or display settings can be switched on or off. The initial state of the control (On or Off) should be made clear from the corresponding inline label.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1777301342,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_121a704525f8ecb7569902864a322e763fca4e245.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1777301342,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1577adf2c626ba4aae3c6bcb93c56c64106d277b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1777301341,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1737abaf8277cf86d9c369167e3241877397a3003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1777301342,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_17243cfb7db8a63525e36ddc1c708cd93b9a1e5c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301342,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the text control if you want to display text inside a form, table, or any other content area. However, do not use this control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/text/media_1dcbe9e931cf7bff5592a3101d6b2ce7e75b8760d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1777301342,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1d0daf335006e27ca534061c8966172506d8c7270.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toggle switch mimics a physical switch that allows users to turn things on or off. With the swtich, single settings options such as personalization ...","intro-desc":"The toggle switch mimics a physical switch that allows users to turn things on or off. With the swtich, single settings options such as personalization or display settings can be switched on or off. The initial state of the control (On or Off) should be made clear from the corresponding inline label.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/switch/media_160c560c97654afa363e6a0dac670ab94da9d8770.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that allows the user to enter multiple lines of text.","intro-desc":"The text area is an input control that allows the user to enter multiple lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/text-area/media_1227a4ce33c8c27079e3726f91b52a6b9ae59ca02.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/table-select-dialog/media_10795cac8769043a141ca4953b01d846815d2e0dc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1777301342,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item can contain an icon (in the form of an image or from the SAP icon font), a title (left-aligned), a short ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/standard-list-item/media_1fe82a3060cbbaa74aeb3bfbbf8e7b6dfd1aff750.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/table-personalization-dialog/media_1e65f502a9807b7fce4ccccd4f22355ca304bb5ff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page. All apps have at least one corresponding tile. The ...","intro-desc":"A tile is a container that represents an app on the SAP Fiori launchpad home page. All apps have at least one corresponding tile. The only exception is the factsheet, although users also have the option of saving factsheets as tiles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/tile/media_1b5bb3aa9d64be1fd3f3e76de5fba494d3aea3453.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table and has a transparent background. The control is used for key actions that impact the entire table. ...","intro-desc":"The table toolbar always appears above the table and has a transparent background. The control is used for key actions that impact the entire table. Note that this toolbar scrolls away.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/table-bar/media_117ab4db7c323f8f948cb39acd4189605dc217abb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1782336497,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, one-line text containing additional semantic information for accessibility purposes.The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.The title is used, for example, by panel, toolbar, or list components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1777301357,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_15b11bb6a0f5f9906f39f1c6b5c6e23301854b5b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1777301356,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1e654853184a3f217c4ce7597b0ce96b6c9e63141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1782336496,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"A toolbar enables the user to change the UI or trigger an action.The table and chart toolbar always appears above the relevant table or chart and has a transparent background. The control is used for key actions that impact entirewhole table or chart. Note that this toolbar scrolls away. In contrast, the footer toolbar has a dark background, appears at the bottom of the page, and remains visible when the user scrolls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1782336496,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. The latest entry is always on top.There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/token/media_1c3e208d4652fe3d849ae20c76fde69f1f474b095.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, one-line text containing additional semantic information for accessibility purposes.","intro-desc":"The title control is a simple, one-line text containing additional semantic information for accessibility purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/title/media_127b3d022c80e9830eaff19312523b5cbf3c62561.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/time-picker/media_15b8420f3314d8e89215d698abde24b726c67e960.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A toolbar enables the user to change the UI or trigger an action.","intro-desc":"A toolbar enables the user to change the UI or trigger an action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/toolbar-overview/media_1bcf23e42f2db7f41ef36999242a5185bb10b09f7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/timeline/media_14fbe2b4ea9bc1c388f02672e2097c615c0fbb88c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1782336433,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/treemap-chart/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1777301371,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/variant-management","title":"Variant Management","version":"","breadcrumbs":"UI Elements / Variant Management","lastModified":1782336496,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.Smart variant management saves both filter settings and table layouts. It creates a page variant that includes all the controls. The button is located within the page header bar, and no secondary management is possible on table level.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1782336497,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"UI Elements / Upload Collection","lastModified":1777301371,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_17d611c1b701e4a410b939dd05a9cc53292f92a7f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1782336497,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps the user to sort, filter, or group data within a (master) list or a table. The dialog is triggered by icon buttons in the table toolbar. Each button shows a dropdown list icon.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1777301370,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_15b0422b7e582e1ddc7ce9908fbc1b3e41c7e8b79.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This ...","intro-desc":"Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/variant-management/media_17cfb54a8204730bbb85097a8db692f7fa3b20c61.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table, or ALV, can also ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table, or ALV, can also provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/tree-table/media_172d15fb4e6224e83bf15a56c831f7b5761238a7d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and ...","intro-desc":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/value-help-dialog/media_144676749459e8603785183a5dd4fbe0298e5568b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/upload-collection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP Fiori app. Typically, ...","intro-desc":"The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP Fiori app. Typically, uploaded files appear in an Attachments tab. However, files can also be displayed elsewhere.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/upload-collection/media_1ed5f6b3019c82873272dd7d1c42e7ec700bce760.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1782336504,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.Examples","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1782336504,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. You can use the wizard both in full-screen and split-screen layouts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps the user to sort, filter, or group data within a (master) list or a table. The dialog is triggered by ...","intro-desc":"The view settings dialog helps the user to sort, filter, or group data within a (master) list or a table. The dialog is triggered by icon buttons in the table toolbar. Each button shows a dropdown list icon.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/view-settings-dialog/media_13e626259fe2c989251fba6ac0973e3c92113e647.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. You can use the wizard both in full-screen and split-screen layouts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/wizard/media_163309f9da6035c86e525267738c90b2ad9a43231.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-38/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-38/ui-elements/waterfall-chart/media_15c02e2c914fb362dae92e035d578559e55ba6751.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777305384,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777305413,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777305529,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-142/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777305561,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements","title":"ui-elements","version":"","breadcrumbs":"","lastModified":1777305667,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/libraries/icon-creation-kit","title":"Icon Creation Kit","version":"","breadcrumbs":"Resources / UI Kits / Icon Creation Kit","lastModified":1782340312,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon creation kit helps lines of business create high-quality, consistent icons for specific needs. By using existing assets and clear design guidance, teams can create icons efficiently. The result aligns with the broader visual language while still supporting unique use cases. At the core of the kit is a comprehensive line icon library. It includes a wide range of ready-made icons that you can adapt and modify. This lets users customize visuals without starting from scratch. The kit focuses on creating and handling SVG assets. You can also use it to prepare line icons for integration into the SAP icon font. This supports both SVG-based and font-based icon workflows. For best results, always use the kit together with the icon guidance. Combined, they provide the tools, standards, and direction you need to create cohesive, high-quality icon sets.","intro-desc":"The icon creation kit helps lines of business create high-quality, consistent icons for specific needs. By using existing assets and clear design guidance, teams can create icons efficiently. The result aligns with the broader visual language while still supporting unique use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines","title":"UX Writing Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines","lastModified":1778062312,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Beta version of the new UX writing guidelines","intro-desc":"These guidelines are for anyone who handles product content at any stage of the lifecycle – from User Assistance Developers and UX Designers to Product Managers, Engineers, and Translators. They cover foundational principles, UI copy guidelines, accessibility, AI integration, and other in-product experiences that complement our product documentation on SAP Help Portal.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/ai-integration","title":"AI Integration","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / AI Integration","lastModified":1782340312,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI is reshaping both the words we ship and the way we write them. This page gives a quick tour of two areas: making product content work for people and AI agents, and using generative tools in your content workflow.","intro-desc":"AI is reshaping both the words we ship and the way we write them. This page gives a quick tour of two areas: making product content work for people and AI agents, and using generative tools in your content workflow.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/translation-and-localization","title":"Translation and Localization","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guideline","lastModified":1782340312,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is a global company and because our products are offered to customers all around the world, the user assistance and user interfaces are translated and localized in up to 50 languages. To ensure a good user experience in all languages, make sure to keep these guidelines in mind:   Consistency: Be consistent both within your product as well as across the suite. This includes style, tone, word choice, etc.  Terminology: Use consistent terminology with SAPTerm as source.  Comprehensibility: Keep your language clear and easy to understand, also for people without first-language proficiency in English.  Style and tone of voice: Create your content with the SAP Brand voice in mind. Remember that our brand personality is the “approachable expert”.  People-centric approach: Tailor your content to the needs of your target group and develop a conversational style and tone of voice that fits both your product area and your audience.  Linguistic correctness: This may sound like a no-brainer, but linguistic correctness is the non-negotiable prerequisite for good user experience, customer satisfaction, and a basis for efficient translation. Make sure to review your content for language, grammar, and punctuation on top of the aspects mentioned above.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/accessibility","title":"Writing for Accessibility","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / Writing for Accessibility","lastModified":1782340312,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to interact with and successfully use the product. Accessible UX writing ensures our products are usable by everyone, including people with disabilities. Here are key reasons why accessibility is important in UX writing:      Legal Requirements: Many countries have legal requirements for accessibility (for example,  ADA in the U.S., WCAG guidelines, European Accessibility Act).   Expanding User Base: Accessible UX writing opens the door to a larger audience, including individuals with disabilities, older adults, and people with temporary impairments.   Better User Experience: Accessible features often improve the user experience for all, making interfaces easier to navigate and reducing cognitive overload.   Social Responsibility: Inclusivity and accessibility are ethical imperatives, ensuring digital products are available to everyone, regardless of their abilities.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/basics","title":"Basics","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / Basics","lastModified":1782340312,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The words in our products matter. They help professionals navigate complex business processes and carry out mission-critical tasks. The right words can ensure success while the wrong words can cause confusion and error. To meet this challenge, SAP's product writing is precise, clear, and consistent. We craft content that demonstrates our respect for the professionals who rely on our suite of products. Our words enable them to run their businesses on SAP software. We call our product voice the approachable expert. This persona balances technical expertise with empathy and respect. These guidelines lay the foundation for achieving this voice and creating clear and consistent experiences across the SAP suite of products.","intro-desc":"The words in our products matter. They help professionals navigate complex business processes and carry out mission-critical tasks. The right words can ensure success while the wrong words can cause confusion and error.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/ui-text","title":"Mechanics for UI Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / Mechanics of UI Text","lastModified":1782340308,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mechanics of UX writing define how we apply our voice in practice. They turn principles into repeatable decisions that scale across products, teams, and languages.&nbsp;  Clear mechanics support all three strategic priorities:&nbsp;   Suite first by ensuring consistency across the product landscape&nbsp;    AI first by making language predictable and machine-readable&nbsp;    People-centric by reducing ambiguity and cognitive effort for users&nbsp;   These guidelines are not stylistic preferences. They are standards designed to help users move confidently through complex processes.&nbsp;","intro-desc":"The mechanics of UX writing define how we apply our voice in practice. They turn principles into repeatable decisions that scale across products, teams, and languages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Gestures","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Popover","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.By default, the chart popover:                     Displays dimension members and measure values fed into the chart that relate to the data point.                     Displays the number of selected items when in multiselection mode.                     Does not display related actions.                     The entire content of the popover can be changed or a related action can be added at the end.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Zoom","lastModified":1782340308,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Types","lastModified":1778611683,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Reference Lines","lastModified":1782340308,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/color-palettes","title":"Chart Color Palettes","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Color Palettes","lastModified":1782340312,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","description":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.This article explains what the three color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_146119eef57d509acecebda9fa5ff3d79c21a8168.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Size of the Chart Container","lastModified":1782340307,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"[internal_only]","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Selection","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Legend","lastModified":1782340307,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-value-based-legend","title":"Chart – Value-Based Legend","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Value-Based Legend","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Time Axis","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color token names that are intended for use in all SAP chart palettes.","intro-desc":"This page provides all the color token names that are intended for use in all SAP chart palettes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/values-and-names/media_1d59fa6cde6977dc554a7009bb6106a11a999c66a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.","intro-desc":"A chart popover is used to display information or an action related to the selected data points of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/pop-over/media_1f4435945d3dc5f915f2d8e10bf14e9b0546b54be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Bullet Chart – Color Use for Primary Values","lastModified":1782340307,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe","title":"Charts","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts (VizFrame) – Foundations","lastModified":1779110370,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Find out how to use the qualitative, sequential, and semantic color palettes for chart visualization.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"default","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Embedding","lastModified":1782340311,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/values-and-names","title":"Chart Color Palettes – Values and Names","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Color Palettes – Values and Names","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color token names that are intended for use in all SAP chart palettes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Value Display","lastModified":1782340311,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Range Selector","lastModified":1782340308,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Semantic Patterns","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:                     Actual Values: What values are (solid pattern).                     Projected Values: What values might be (dashed line, hatched areas).                     Reference Values: What values should be (dotted line with empty circles, empty areas).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type","lastModified":1782340307,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579891,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.","intro-desc":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/color-palettes/media_1656c66dd3f07b84c128115b113b0934701e82ac2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579890,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Scrolling Direction of a Chart","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Number and Time Format","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters                     SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778579908,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Comparison","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks. If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation Over Time page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778590042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Correlation","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.Scatter charts and bubble charts are the most frequently used charts to visualize a correlation, although using a line chart or bar chart side-by-side is also an acceptable solution.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778590140,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778590191,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Deviation","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers. The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category. All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Distribution","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778590258,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Part to Whole","lastModified":1782340310,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778590304,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Ranking","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778590336,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Variation Over Time","lastModified":1782340309,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods. Time Category and Time Axis By convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations. We recommend using the time axis which has three main advantages:   It allows you to display dates and times in a responsive manner.  All the complexity involved with formatting the axis labels is automatically taken care of.  The physical spacing between the data points accurately respects the time scale, as opposed to just displaying them equidistantly.  Additional Categories In addition to the time category, there are additional categories that contain an intrinsic order and that that carry the notion of progression or trend. For example, age, time period, or a rating. As such, the rest of this article also applies to these categories. Column or Line Chart?   Use a line chart if you want to emphasise the trend over time.  Use a column chart if you want to emphasise the values themselves.  In the figure below, you can see that the trend of the values immediately stands out in the line chart, while we need to make an effort to visualize the trend of the values in the column chart. At the same time, the values can be compared more easily in the column chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1778590371,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/resources/ai-skills/sap-fiori-guidelines","title":"AI Skill for SAP Fiori Guidelines (external)","version":"","breadcrumbs":"Resources / AI Skill for SAP Design System","lastModified":1778597108,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Bring the SAP Fiori for Web design guidelines directly into your favorite AI tools.","intro-desc":"With the SAP Fiori Guidelines skill, you can use the SAP design guidelines directly inside your AI tools as you design and build.","image":"https://www.sap.com/design-system/fiori-design-web/v1-145/resources/ai-skills/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"external_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1780050505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In general, use long text to display units of measurements, and do not use abbreviations, such as (ISO) codes.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1780050505,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain ...","intro-desc":"A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/tables/media_1c588f5f722cd67d763473ae554b76e25ddb439ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1780050504,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1780050504,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1780050505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1780050505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1780050505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1780050505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data ...","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1780050505,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/media_1f49304e3714d72ea4dceed1442cd7eb1d81361b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1780050505,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization can be used to modify the display and settings of a table.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/tables/media_148972a96b93f46542626688003fc01290f86c781.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1780050506,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1780050506,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/media_111cc1ee2a70310574a042582375052124bec1cdf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1780050507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level ...","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/media_16f99fa6efcbe276c93111f8e44bafa685a0292cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1780050507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/media_108541462ce9e30919b7314c39a25f4645d7be76f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1780050507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage leading and trailing white space (blanks) when copying and pasting text into input controls (such as input fields, text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/formatting/media_1c3891164147b26d35d90c36cd06324f775f90cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1780050508,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/media_1380d05378bd5264023e6fc84e6076138ccf9a380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Which Selection Control Should I Use?","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Which Selection Control Should I Use?","lastModified":1780050507,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support ...","intro-desc":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support dedicated use cases. This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/ui-elements/media_1fbf5806ea6a90aa61abe81230bd18da77eedbf54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1f56d58bb148b3d6da9be7771b4fa25290abf15d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"","lastModified":1782337415,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calendar-card","title":"Calendar Card","version":"","breadcrumbs":"UI Elements / Calendar Card","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1eac993b6e1a1935bb1ab18357493182da0f90f78.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_126fc875b4d9441c69c3bfa3196c1c570e5d455b9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit ...","intro-desc":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/cards","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1780057740,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_13f3c40d83fd221dd28c175b626c6e391e6b7a9a0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval control displays a range of days in a single row, saving on horizontal space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1418c5bb245b800c8ca3aacd65839c15915243cd8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1a04121bc30e895d4c592eb53e453df64f1dcd5d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1780057740,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1923dbdc763deedfff4b08951b3d5ca855e63c934.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1d74d61a6ea00cfc1fb4887cd14e2e92ec5efeecf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/action-list-item/media_1f192edd5b50c31f8c7a4a2fffe9904a0e1ffa061.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1780057740,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons enable users to trigger actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_18902c8ecddb6d4d89af972a26ae9a51fb4d0a6bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Part to Whole","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_119bec665a0b300b017f8c5ae26df4bdf6f1f5c7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, ...","intro-desc":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/calendar/media_1b5dc077d6a4be97ff215f46980530b946997f4f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1780057740,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_17f216b89aff0cd8c5f23a03026e93560724c041e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Reference Lines","lastModified":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Add reference lines to highlight a particular value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_198b5389c27836743e942b0ec9485fbf03a7ad53d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Selection","lastModified":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes the different ways users can select one or more data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1eb2c60448de4b314876e4f1cac80ed735883fcca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/values-and-names","title":"Chart – Color Palettes – Values and Names","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes – Values and Names","lastModified":1782337415,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page provides all the color names in the chart palettes.Use Names – Do not use HEX values!Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.You cannot change the HEX values unless you create a new theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ongoing operation covers only part of a screen that has multiple controls, and:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/busy-indicator/media_1e5850f86967e7aaad8da6fb64fe3b410e2ac3941.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Number and Time Format","lastModified":1782337416,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1780057740,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1977181d19a7a94847955e24ac98332dcb2ab6704.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.","intro-desc":"A chart popover is used to display information or an action related to the selected data points of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/pop-over/media_1f4435945d3dc5f915f2d8e10bf14e9b0546b54be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-toolbar/media_1d836296792fd447472804da0faa5f1369713c4da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Examples of a user image, user initials, and standard user placeholder icon","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/avatar/media_15102b7539cf535c7971b973554d91d3144c1b110.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the Previous and Next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/calendar-date-interval/media_1e7d0554823734fa58c69f38f3dada666ed438f7d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"An analytical table, also known as an ALV or ULV, contains a set of data that is structured in rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1e25aba462f6b6987eb18980e8832d8026a719b9a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts. It comes with built-in actions for the table display and personalization.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1b42da34c0ff823e3f62de84f7f372da25ab54849.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Chart types available in VizFrame","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1dfdd6e01f3777b6c79232c808e278af4e5226776.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1780057740,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_12ae6343e60ce4d2476cd51313af9be064b7aa666.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/breadcrumb/media_16013b09ed8605a8e6769a2e6460930102375627e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/cards/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a ...","intro-desc":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/cards/media_12cff613555f634035aef58b44089d164475cab72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/busy-state/media_16e30becd2841a8bbdbde30b01be18525b9b85a84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-value-based-legend","title":"chart-value-based-legend","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Time Axis","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1cda229d52f6623987285b35200f9e75e85a422a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Popover","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The chart popover displays information or actions related to the selected data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_19ca9b15c3785c183a6484ef5b730bc9943317841.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/color-palettes","title":"Chart – Color Palettes","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes","lastModified":1782337416,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Variation Over Time","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article illustrates the different ways you can visualize changes of measures through time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_18fd1e5ae95cc0dac8d9d23a36d82fc215e65e34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1780057741,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calendar-card/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected ...","intro-desc":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/calendar-card/media_1cf998dde09d9c7b19ba8439e201941eb05d3aae2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Correlation","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The article explains how to use different charts to visualize the relationship between sets of numerical values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d56079cb733ca1637af1d50ac99bf387b32367a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1782337415,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color names in the chart palettes.","intro-desc":"This page provides all the color names in the chart palettes.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/busydialog/media_13aa5ff9f7de0c020ee6a30a41f3be54ff221703b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calendar","title":"calendar","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Semantic Patterns","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_17ea7ae7794e4c4d22eed1ba4adbc89e6df41d114.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_18f051784aa3605f6e3af0fd8ad72e66f5166d594.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Ranking","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to choose the correct chart for ranking items based on numeric values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_198df7305b7fc5050fa8f61ad0a0933907ae75b12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/calculation-builder/media_18aec04f8fc16c780b640f8a9488996bc891d0b85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Deviation","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the deviation (difference or variance) between two measures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d90cb315472cd4160e37451219d4b27d05b4ddcd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"","lastModified":1782337415,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1780057741,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_182fa7ad74bd6db4daba2981f58715d04f388739e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Size of the Chart Container","lastModified":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The property \"autoAdjustHeight\" helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1b559114bed77c670f06ad86c970851c850079923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Legend","lastModified":1782337415,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-types/media_1bf79942bc727d82c713c0b4f74b1da3b54318965.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Zoom","lastModified":1782337415,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"xThe user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Range Selector","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The range selector is a user interface control that enables the user to select a range of data points in a data set.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1365f96e7784d8d23cc3e608f2ac6f83f44d0ef0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1782337416,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type","title":"choosing-the-correct-chart-type","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1780057741,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_132a212a1cdd659cd8a4a816cc3e821771e78acef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1782337416,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_19835d963b20571089a1098e3cb48d39bdd5e936f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it's crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_19aaeb7fb71e579c1fb65563e213112ebbbe6169d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Comparison","lastModified":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_17332c2ebe0065b9e8653a1e0fc809ab49973669a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Embedding","lastModified":1782337416,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color palette with 15 colors and just one recent color","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/color-palette/media_12ae77a64ad0711d80f1329dc66dfa8895f089415.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/color-palette-popover/media_17b786cf30cdfc76290a350f60b8e26789b48ee14.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/color-picker/media_1b078aaf0dc5403af74c988e35c55cb41c0a2cc5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"x","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/color-picker-popover/media_1a848c35dcc69fb71fb037a1ff2ab8d67c4815745.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1780057741,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c0549d8befcf8607301fc4e1c5769cb889c948bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057742,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/analytical-table-alv/media_1e7183a20648f018b82be40008d0dcafabad03cb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked ...","intro-desc":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/checkbox/media_12de749261dd0eaf2b857c896df7bf87778536559.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/color-palettes/media_110ae4a44b1ffb64ee40d61435ce0279d39a8b0bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe","title":"chart-vizframe","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057741,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons allow users to trigger an action. There are 4 button types:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/button/media_18c544dfd01aaa6578bfbd754c1e427746bd44141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057740,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/action-sheet/media_1307ced44ac8cd3751cbe373127338a6dd1b3b55b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dynamic-date-range-2","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date Range","lastModified":1782337422,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1782337421,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.The Gantt chart control provides the basis for creating such a Gantt chart and is a generic tool. Applications can consume the control in order to implement their use cases, and if necessary, they may even enhance the control.It consists of three areas: a chart area, a table area, and a global toolbar.Another feature is the option to have a split screen that includes two or more views next to one another, each view consisting of one table and one chart. These views can be arranged vertically or horizontally, and they share a common (global) toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"","lastModified":1780057760,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/contextual-filter/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057760,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Filtering options are now covered by the filter bar and table toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/contextual-filter/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/flag-and-favorite/media_165a342b5a1cd4e8caa1f2056ffea6b211160c6f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1782337427,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1782337421,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1782337421,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows                     content in the form of labels and text.As forms                     are generally the preferred control for combining labels and                     fields, display list items are seldom used.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/expandable-text","title":"Expandable Text","version":"","breadcrumbs":"UI Elements / Expandable Text","lastModified":1782337417,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1782337418,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"The date/time picker allows users to select date and time values in a combined input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/datetime-picker/media_149c67e757203a28f03639e2676d5ca3bfecf02c1.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1782337426,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1782337417,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.Show Comparison for Selected Items","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1782337419,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:                     A small flag indicates that the object is flagged.                     A small star indicates that the object is marked as a favorite.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1782337421,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed                     enables SAP Jam users to post comments and reply to posts created by other users. You can use it just for                     collaboration, or offer collaboration alongside application-generated content.Like the timeline, the group feed component shows a series of                     entries in chronological order, such as changes to an object, events related to an object, or user-driven updates and                     comments. The latest entry is always on top.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dynamic-date-range-2/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/dynamic-date-range-2/media_19491f55a3818f912dd0e3a2c78244e25ec4d874b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dynamic-date-range/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date is a smart control that is only available in the smart filter bar. When the user enters a value in the date ...","intro-desc":"The dynamic date is a smart control that is only available in the smart filter bar. When the user enters a value in the date field, it suggests corresponding fixed and dynamic dates. It also offers a value help feature that lets users choose between different time periods and define them further.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/dynamic-date-range/media_1497276de53ac19b25f850e695c9da0bc187431d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dynamic-date-range","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date","lastModified":1780057760,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A smart control in the smart filter bar that proposes fixed and dynamic dates.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_15c60c560c869e7c48c59237e5d907288a13d1cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a ...","intro-desc":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/dialog/media_1b262a4dff5a4a69520ac90807071fdaa6e902b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/comparison-pattern/media_1c240b529e72e2fa053c6626e59d9cc68e9fe8645.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. ...","intro-desc":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/dynamic-side-content/media_12daa1058e0ed755fb7392a2683ce8c170088a964.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/expandable-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or ...","intro-desc":"The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/expandable-text/media_17ad853611798a7462651553678bb2b08898ff395.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1782337430,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1782337425,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1782337422,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The formatted text control displays HTML text. You can                     format the text using HTML tags or embed formatted text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1782337414,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of                     input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/date-range-selection/media_1553ea7fff4a734085596fdcc7311fa936716bc92.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057760,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/display-list-item/media_133b9d5f6374df618a2c60b0e091d9fde05205715.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1782337414,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.If the entries are not validated by the application, users can also enter custom values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1782337420,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1782337428,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users                     to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card                     number, currency, and IP address).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/formatted-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"By default, the control uses the standard font and headlines. It supports the following HTML tags:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/formatted-text/media_1ad302b9081d3eac381c9202963c8e33714f082fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/infobar/media_15dca207dbb06e696076b22dd2098a1211b5b5bf2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/form-field-validation/media_1a60823b6e3a8d75aaaf96487420c63fce7955bf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/gantt-chart/media_182607306f0ec9c8750541a3ff9cd5c21c5bc4a94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/illustrated-message","title":"Illustrated Message","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1782337424,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a recommended combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/export-to-spreadsheet/media_1912ebaa7a6ba534c69fd7d1fe7beb3883604e36a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1782337417,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1782337429,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.In SAPUI5, forms can be built using two different controls:                     Form – sap.ui.layout.form.Form (API)                     Simple form – sap.ui.layout.form.SimpleForm (API) With a form, you can easily layout a list of properties and input fields. A form is structured into form containers. Each form container consists of form elements. And each form element consists of a label and an input field.The simple form control gives you the possibility to achieve the same result as with the form control, but in a much easier way. Inside a simple form, a form control is created along with its form containers and form elements:                     The layout and structure are defined by the content that is entered.                     Form containers and form elements are created automatically according to the content type.                     A title (sap.ui.core.Title (API)) automatically starts a new form group (form container), and a label (sap.m.Label (API)) automatically starts a new row (form element). All other controls following this label will be assigned to its row (form element).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/feedinput/media_11b7a529fcc4ef4db57e1f2259811def5acfc7da4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/input-list-item/media_1eaaeaa0a5452a278606c9e19135caa52112785c7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/html","title":"HTML","version":"","breadcrumbs":"UI Elements / HTML","lastModified":1782337418,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/invisible-message","title":"Invisible Message","version":"","breadcrumbs":"UI Elements / Invisible Message","lastModified":1782337426,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1782337418,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using                     touch, mouse, or keyboard input. It consists of two                     parts: the date input field and the date picker.Use this control if the user needs to enter a single date                     or a date range. The control also allows users to navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1782337419,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A label is the name or title of a control or group of related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/label/media_1a0ba7b427c7b4049585c99851c6394c2d0a22266.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782337424,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as hyperlink) is an interactive text                     element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1782337422,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The link can either truncate or wrap. Favor wrapping over truncating and keep the link text as short and meaningful as possible.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/link/media_1baef3484015761e8a00e7a19bb9e9807df0fa3b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/html/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise ...","intro-desc":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/html/media_19b84bf34545fee97d63137d2ec1147dc6fa299fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into ...","intro-desc":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/image/media_16451af95fa2d40b83226fc5eb72c93be6114bf58.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation ...","intro-desc":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/icontabbar/media_13a1e737768ab81e4f53ccbfad8dad52a1207ea86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/form/media_1d63a4170d01a5c0934425974c4c1e1e0075d3323.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/input-field","title":"Input Field","version":"","breadcrumbs":"UI Elements / Input Field","lastModified":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_168640df3ccffba70615ba464269dbd6ab9697764.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1782337428,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of related controls.Every field needs a label. If you use one label for a group of fields, use a combined label and invisible text to label the single fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1782337428,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:                     Filter criteria: The infobar indicates the filter criteria that have been applied for a filter, for example on a table or list. Do not show the infobar if no filter is applied.                     Selected items: In a multi-select dialog, the infobar shows the number of selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_145a213fa53d2acc2be46d53891379fb77af77971.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/illustrated-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An illustrated message is a recommended combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/illustrated-message/media_107c4bbe85ff633f369b8e51df4006c1993cfd540.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1782337425,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.For more information on the messaging concept for SAP Fiori apps, see the article on message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1083775524bad08c6e8cb152ac6bfec12ca893379.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/invisible-text/media_1bb653aeb0da45903951b29fa321db56586b9f21c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/invisible-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users ...","intro-desc":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/invisible-message/media_18eac0c5b4fddcdd03feeccd307d69481b64d77d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/date-picker/media_1da94e74ba4a2dbee666c10d58a3d53122cee0e52.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mask input extends the input control (sap.m.Input) and has all the normal properties of an input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/generic-mask-input/media_1ecc41657c1842b1b9bb64e71b30f44013c2a7f17.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/combo-box/media_18b457f9616bd67c2dac48ec1574a056eab37a024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057761,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the ...","intro-desc":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/grid-list/media_1b454ce5b965ffd3cacbcca0cf7f7a9a4e50a737d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057762,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/grid-table/media_13d9eaa358eb22d8ad8736226ab9bfc07e5d8c2c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057762,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you ...","intro-desc":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/input-field/media_195a274d7ee02e1e1a463bbfbd6041926962285d4.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to ...","intro-desc":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/message-view/media_1e0a1dd474125e4da01a47048011f5df39810a178.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1782337417,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782337429,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is                     connected to an object and displays a certain type of                     information (status, identifier, number, marker).                     Object status: a short text that represents the semantic status of an object                     Object identifier: a short text that represents the key identifier of an object                     Object number: a short text that represents the numeric                     (key) attribute of an object and its unit                     Object marker: indicates the technical status of an object","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1782337428,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1780057783,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the rating indicator to let users rate content, or to display a content rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1cde5b70b486f81f2e2fede5e8df39a8c9daa1300.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1782337423,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1782337423,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover control can display multiple messages                     of different types in one list. For example, it might show                     several messages related to entries in a form, or messages                     triggered by a finalizing action, such as Save.The message popover is used in conjunction with a technical message manager, which populates the message                     list. If an error occurs at a validation point, the corresponding message is added to message popover                     automatically, without interrupting the user.Users can browse messages by type and navigate to the message details. In some cases, they can also jump                     directly from the message to the affected field on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1782337418,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1780057783,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF Viewer control enables PDF documents to be displayed, printed and downloaded within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_196b8ce547996f5ecc1f1a73c8ac39e37a7b0a989.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/placeholder-loading","title":"Placeholder Loading","version":"","breadcrumbs":"UI Elements / Placeholder Loading","lastModified":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_10be93ad85f14bc84d1b8c30009d0586b16ca7f09.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1782337420,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_17a4d74f7eb157d90bbef713c5dec90808d31f0ff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item’s text sizes are limited due to truncation. The title wraps once and truncates after two lines. The key attribute also truncates ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/object-list-item/media_1f45470c7866e6bf8083da18bf1c214a3a08ea800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be ...","intro-desc":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/message-strip/media_17fb925ce0da4ca075e7b043b0d9d85d028baed2e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057782,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message page gives feedback to the user when an empty state occurs at page level, such as an empty app or list. The message ...","intro-desc":"The message page gives feedback to the user when an empty state occurs at page level, such as an empty app or list. The message page explains what information would normally appear on the page and how the user can proceed.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/message-page/media_1709bc684a8485f22771318bc363d80182a6cca13.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/p13n-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The p13n dialog control allows users to personalize one or more of the following table attributes:","intro-desc":"The p13n dialog control allows users to personalize one or more of the following table attributes:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/p13n-dialog/media_137b98d61c8dfe554af203fac3d61db837f19ff3b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1782337423,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1782337423,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"UI Elements / Message Page","lastModified":1780057782,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_102b4473ab3c24ec01370227bd3ed9d65eef3a5b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_10bd8e35033f523b65aac4b5019fa93df3a1045b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1780057783,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see parallel appointments and create new events.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c2d479a9e64de20357b6f99a888481f35f737ae4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1782337419,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.When triggered by the business application, the output control collects and validates all output parameters, creates the output documents, and outputs them. The possible output parameters handled include what to output, for whom, when, and through which medium.A simple use case is: you choose to email an output document to your customer based on an available form template. The system records the date the output was created, and indicates that the output has been sent.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-field","title":"Smart Field","version":"","breadcrumbs":"UI Elements / Smart Field","lastModified":1782337426,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has ...","intro-desc":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/notification-center/media_1c8ee29e0757c7fd4ee733773ccc31da90eb1382e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/placeholder-loading/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. ...","intro-desc":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/placeholder-loading/media_13175ff2e20060d41ef72d9cee92b3f257f4ad589.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1782337422,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb ...","intro-desc":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/category-navigation/media_16ea748199d8c402123173db74045f3537b3b5388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_126ca080cad7de2e9b2a5919204aecef23ea7bb2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/process-flow/media_1b3b1b8be78eb186eac11e2b1d70bdf40ae708923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/object-display-elements/media_1d5e293aa90a85990cd3e79fbc23bdae9e037287e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/rich-text-editor/media_10c6fbe2398260def9ecf37662212e23e42d808bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive and searchable list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_16ab7a5506682c5c242cc732071dc430b34804103.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1780057783,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor is a text input control that lets users format the text and insert different types of elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_16177af901fdc26a4940ef75064698a54573136e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can ...","intro-desc":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/multiinput/media_17d4827979432d36522e8b755a880e7a483d3ef85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-form","title":"Smart Form","version":"","breadcrumbs":"UI Elements / Smart Form","lastModified":1782337427,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/scroll-container","title":"Scroll Container","version":"","breadcrumbs":"UI Elements / Scroll Container","lastModified":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The scroll container is an empty area that can be filled with content, such as other UI elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1bf0e645420f6063517459b6231104ce33d7be50e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782337423,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1780057783,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_16b8bc930daf6b444cb9f3d2f7f3faf7241508581.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/message-toast/media_1452174aa65f6fe723d9ba054683dbed46c49f6cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1782337417,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057784,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes ...","intro-desc":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/smart-field/media_13982ddaf16d568b28f5fbf53dd98b2079035ecbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/search/media_173c464bcffb8da1ceed059355bddeceb7346eae8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/select-dialog/media_151d474f12215db531d4813d312889e5dd488b289.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control ...","intro-desc":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/output-management/media_147f032d680639911c698dfb0a49783e2d38b6027.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057782,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/message-box/media_1ec4554406bdc4757477eca2294f2d9170f2f0d86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1782337421,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1780057783,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1dfcdc1819c1f733ccedcbbdcac973961700f94ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1782337423,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.A line item contains several data points sorted into columns. A data point refers to a unit of information, such as a number, a text, a unit of measurement, and so on, which can be used to form the content of a table, form or other control. One data point is usually displayed by a control, such as a text, object status, or input field. A control can display more than one data point, for example, by concatenating text.In contrast to traditional tables, a “cell” of the responsive table is not limited to displaying only one control, and therefore a single cell can present far more than one data point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/rating-indicator/media_16ac117ff61db9722b4ab3dcbcdaf33f3133fb33d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/quickview/media_1c26630b4d844c4a3a3b964ac55788481a644a054.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/shell-bar","title":"Launchpad Shell Bar","version":"","breadcrumbs":"UI Elements / Launchpad Shell Bar","lastModified":1782337417,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/select/media_14f87bdc64bc20d6b1ebe6f4ec6457eb42ef2d9d0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1780057783,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The search field enables users to search for information or filter data by entering key words as text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c2e40222c3b1f486b1dfc7d0164c86027b1cf8e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/single-planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/single-planning-calendar/media_138330fed23841f66ba8e2a21aef216490a306641.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-form/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for ...","intro-desc":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/smart-form/media_148f43ae8402e44ccb124c8141019c1cb70ae4d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/scroll-container/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","intro-desc":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/scroll-container/media_1685d43a2e70460d15841eee27d8a56c3ad9d4b3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1782337416,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1780057783,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the process flow control to represent the stages in a business process (such as approval).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1034d643556c0d7a392ffff83a7d7b05bac922de2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/planning-calendar/media_1f0db41ef1a86ccfbd220d19188df53d2b5c718f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/shell-bar/media_11ddc43932564566f7831a8366a8f9eb530bcb7b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/message-popover/media_196246300458de95205337a5e1a57cea757c164b6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/pdf-viewer/media_1bfa25b86afee6191679c8e74904e96c327bba1db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057783,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable ...","intro-desc":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/multi-combobox/media_10d500acaab4c158d56c651bf63a146324fb473a1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057785,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, ...","intro-desc":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/responsive-table/media_19514703fea1c7b754a26171c02247c81b38e2eb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1e654853184a3f217c4ce7597b0ce96b6c9e63141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1d0daf335006e27ca534061c8966172506d8c7270.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/upload-collection/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection component has been replaced by the new upload set component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/upload-collection/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1782337428,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.                     The smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_139f0673721fc998be3c3394ec581b8d3bb3a3b60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tree-toolbar","title":"Tree Toolbar","version":"","breadcrumbs":"UI Elements / Tree Toolbar","lastModified":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The tree toolbar always appears above a tree or tree table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_14c69202217ac0c22d00b624861f8437f247a4e51.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1782337425,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.The title is used, for example, by panel, toolbar, or list components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_17243cfb7db8a63525e36ddc1c708cd93b9a1e5c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_121a704525f8ecb7569902864a322e763fca4e245.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the text control if you want to display text inside a form, table, or any other content area. Do not use the text control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/text/media_17a6a4d7d9ecbe3b0185343536e6e9dd8316ba336.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1782337423,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple conditions. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-list","title":"Smart List","version":"","breadcrumbs":"UI Elements / Smart List","lastModified":1782337423,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the smart list control to create lists or trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/time-picker/media_1abafe930c2047d5c4e059f691fa15a70eaccaf43.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the smart list control to create lists or trees.","intro-desc":"You can use the smart list control to create lists or trees.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/smart-list/media_1b94ab65835677a74e9c0e573b679b916946adf82.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/upload-set/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/upload-set/media_16c934d2c6175ca6ca4f1906f650ad1623337d15c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1782337426,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/table-select-dialog/media_1429c80d6a6fc0224079b28b3d48696966ec64bea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/barcode-scanning-mobile-integration","title":"barcode-scanning-mobile-integration","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"The text area is an input control that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/text-area/media_14a067e78bf2b63cd367568fe51aaa65afabe88b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/generic-tag/media_1587875b87665528a3047fdb684f14cb8ff9911bd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1782337418,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally                     contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/translation-of-textual-user-input","title":"Translatable User Input","version":"","breadcrumbs":"UI Elements / Translatable User Input","lastModified":1782337420,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business                     objects may need to support textual input to be                     translatable into several languages. The use cases for                     translations of texts might be very specific to the                     application context. This guideline will define a pattern                     for a general use case. If your use case differs, use this                     pattern as the basis and adapt it as necessary.The key features of this pattern are:                     The initial maintenance of an object and its translation                     are separate steps. Therefore the maintenance screen of the                     object (in many cases the object page) will accept any textual input in the login language.                     The translation of the textual input is a separate                     (follow up) step. It is done in a separate pop-over dialog focusing solely on the translation task.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1782337419,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.This article gives an overview of what kind of different toolbars exist and when to use which one.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1780057806,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_18adc4130bbed88d5181c14d1be4fc12b73caaa66.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/timeline/media_1a5870b3ba47daf14588a43ad372c6e5d2aed4c0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/footer-toolbar/media_12a3f22e888af82d7f02d0156be07146fe923ea87.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/tile/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1782337417,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/header-toolbar/media_16211bc4d4ad8145a4c8bbb2e6676c81d00b3112a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1e23225dabddd022a02bbfcbdbfb7f7b30c089430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1be78841a819a454cfd25ae304e7cf888836b938d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1782337430,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.A common use case is to provide information about changes to an object, or events related to an object. These entries can be added manually or generated by the system (for example, value XY changed from A to B). The latest entry is always on top.Another use case is a feed that is driven by user updates and comments. This feed can also be entirely devoid of machine-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1577adf2c626ba4aae3c6bcb93c56c64106d277b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1737abaf8277cf86d9c369167e3241877397a3003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and ...","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/smart-link/media_1fc9217782813e0c2c8c06bfd76d6a37237929542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/table-personalization-dialog/media_1c7b4b60cb1988ecc718fe3a83fc476697cc1dbee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/toolbar-overview/media_10f9a05ba1d8be44b0e3a449cf45f9e709644c72f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"The step input control allows the user to change the input values in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/step-input/media_18fcd8cfe88652ecff8cd8666dbc7f9da7138c9b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/status-indicator/media_1204bd3d1e927fceef6f0f4c80ec470ebbd23a39d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1782337420,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/menu-button/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The individual button guidelines have been consolidated in one button guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/menu-button/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/tree/media_18d1dc8dba17e241eb8d6887fca3af6af284bc2e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1782337417,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize                     the state of individual items in a linear workflow. You                     can embed it into a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. ...","intro-desc":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/smart-table/media_118fbde6f6a28daf57a908ccf016ab3cad214d6c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/translation-of-textual-user-input/media_14ed9bfa5c8f88c852b17f41ec904a9d983dcd3fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1782337419,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1b03b5d66339f5be27f1d0cd6dd483ddbdf4e3da8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item can consist of the following parts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/standard-list-item/media_11d242e77027bb4f0313ea57e7008f1a7d06be968.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1782337424,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.T accounts are usually clustered together, so the accountants can analyze how individual line items from different journal entries affect the ledger balances.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/barcode-scanning-mobile-integration/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/barcode-scanning-mobile-integration/media_1af908aa391d2b095e466808e24e2c11b6d22cff4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/variant-management","title":"Views (Variant Management)","version":"","breadcrumbs":"UI Elements / Views (Variant Management)","lastModified":1782337424,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.The variant management control enables the user to load, save, change, and maintain variants.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/lightbox/media_178f3edfee6590bd7c938b8cf241e41c930c1a400.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1782337428,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).The smart filter bar is closely related to the filter bar, as it covers the same use cases. The difference is that the smart filter bar uses annotations to create a filter bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/tree-table/media_12c2920fb57e11f0b4a2d61dda3a3659f389b340b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/table-bar/media_163843b8fd5478550baedcb91d0f0a29e66b20474.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/avatar-group/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The group type displays overlapping avatars. Use this type if it’s important to display the sum of people at first sight, rather than the individuals. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/avatar-group/media_19bb9eb22bed3e7c10d622a366257f769572da1f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The default steps can be replaced by other controls. The following controls are supported:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/micro-process-flow/media_16ad4ea12ff054ea17f03587aa63bf439f3633207.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1782337428,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/carousel/media_1dc2820fc95aafa66306509643071ad960bfab90f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tree-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057805,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","intro-desc":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/tree-toolbar/media_13c16b182e7d7732de73a72320704c8c0f55e4f41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1782337420,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.In the case of tree tables and trees, items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single topmost node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and ...","intro-desc":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple conditions. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/value-help-dialog/media_15ebd4b0fae7bfc69fb0da64311d82776d2658555.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1782337427,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1780057806,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1363874a3f73836f5da6cce0ced88d37e0f0c0122.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1780057806,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_169b720bbcb5ce455bbf27c5d3032fea82aca85b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1782337429,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/avatar-group","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1780057806,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays a set of avatars that represent people.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_18d9d3b2859970a6d07f62467fe37a753914a5003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/upload-set","title":"Upload Set","version":"","breadcrumbs":"UI Elements / Upload Set","lastModified":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The upload set control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_190988245222535843d9b13a767ba59fa138dca02.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of ...","intro-desc":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/filter-bar/media_14628a6397c474b8bfeb9801aa7e5a3855e77f65a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons ...","intro-desc":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/view-settings-dialog/media_18ac0065e367d3ffa15c71931aba77594965c8a3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1780057806,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel is a control for browsing through a set of items one item at a time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_17bb56bc06426d3f63c66a9976ce763e9c80645f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak ...","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/variant-management/media_16e7eb31b3d9c6b01aa2f8f3e07f13e4a7f492129.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057806,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/wizard/media_1dbf1c997b206d1453cc9a04b32c515252d4439a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources","title":"resources","version":"","breadcrumbs":"","lastModified":1780057816,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/libraries/design-stencils-for-sketch","title":"Design Stencils for Sketch","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/libraries","title":"libraries","version":"","breadcrumbs":"","lastModified":1780057816,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/libraries/design-stencils-for-adobe-xd-2","title":"Design Stencils for Adobe XD","version":"","breadcrumbs":"","lastModified":1780057816,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/libraries/design-stencils-for-axure-rp","title":"Design Stencils for Axure RP","version":"","breadcrumbs":"","lastModified":1780057816,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/user-research/user-research-method-cards","title":"User Research Method Cards","version":"","breadcrumbs":"Resources / User Research / User Research Method Cards","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"User research helps you to better understand end user needs, expectations, and typical working processes as you follow SAP’s design-led development process. This easy-to-use card ...","intro-desc":"User research helps you to better understand end user needs, expectations, and typical working processes as you follow SAP’s design-led development process. This easy-to-use card deck provides an overview of the 14 most commonly practiced user research methods at SAP and how to apply them. Most of the methods can be used both physically and virtually.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/resources/user-research/media_15acb1666d58de683c12638690f28339dcfe2fd41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/user-research","title":"user-research","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/downloads","title":"SAP Fiori Design Stencils","version":"","breadcrumbs":"Resources / Libraries / SAP Fiori Design Stencils","lastModified":1780057816,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic ...","intro-desc":"Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic impression of your final design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/libraries/design-stencils-for-figma","title":"Design Stencils for Figma (Mac and Windows)","version":"","breadcrumbs":"Resources / UI Kits / Design Stencils for Figma","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use this stencil set to create high-fidelity SAP Fiori designs using Figma.","intro-desc":"You can use this stencil set to create high-fidelity SAP Fiori designs using Figma.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/resources/libraries/media_16949b6d8b873be3e3dacd355f6c96627b564d63e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/resources/user-research/how-to-present-your-sap-fiori-app","title":"Showcase SAP Fiori Apps in Device Frames","version":"","breadcrumbs":"Resources / User Research / Showcase SAP Fiori Apps in Device Frames","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images ...","intro-desc":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/resources/user-research/media_1404359f37fcc643bcd23e295ca90721d58fd9542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1782337429,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.Examples","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1edd7bc7cfe6abde044176cb5b48a54486064b031.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1782337429,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter by categorical data. Depending on how the data is sorted, this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1780057817,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_146e56fe94d51d0b6d6894f5ca69e0a3cc9d998c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1780057817,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator shows the current completion status for a business process (static value).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_16b4a24f2f8fd91beef9a8e9a8702d0c6c1f4c1d8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1782337426,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1780057817,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_147c4d25afa4cd891d6a5f00e0cd4cfb97dddd3a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1782337429,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1782337425,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.There are three main ways to visualize a column micro chart: View with top labels for start and end values, and bottom labels for start and end dates                     Detail view with labels for each vertical bar. This view can be used only if there is enough space for enough bars width in the container.                     No labels. In all cases, the label can be switched off. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1782337431,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1782337420,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such ...","intro-desc":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/popover/media_15102e0a496776448e60352dfb0bb45ec1dd6370a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1780057817,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1e2cd72b19bb1b0af44f2ebc94d9754bc7b6e27ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1780057817,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_15b11bb6a0f5f9906f39f1c6b5c6e23301854b5b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1780057817,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart, which provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_138288a10e29da6edc421acac87be684e05429910.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1782337430,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"UI Elements / Smart Filter Bar","lastModified":1782337424,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).The developer can use annotation properties in the classes ControlConfigurationControlConfiguration and GroupConfigurationGroupConfiguration to adapt the filter bar for the purposes of the app.These annotations let you:                     Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)                     Enable the autocomplete suggestions feature Enable the value help dialog                     Overwrite settings from the OData service                     Set custom filter groups                     Add custom fields Access all settings for the underlying filter bar                     You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1782337426,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/area-micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1782337414,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1782337426,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color ...","intro-desc":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/progress-indicator/media_13042cf0dc50209899b709f01d3c1f135c13ed11b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1782337428,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.Visual filter bar - Size L","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"A slider is a control that enables the user to adjust single values within a specified numerical range.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/slider/media_1e7452b990d893329fb385c25c0afcd94cc5c25dc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1782337430,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/token/media_194faf9acf24d104d55a905e852105a56e8d2c817.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","intro-desc":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/range-slider/media_13f5fb9c32b7956325c2620553ac51543f92e4042.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1780057817,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A popover displays additional information for an object, and can also offer actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1e214dd1165e3670ab6e0c507dff22baa67530c38.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1782337417,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter large sets of data by time period. The user can see both the time period and the measure at the same time, where the period is always the horizontal (X) axis of the chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/radio-button/media_10b58c1999bcb2bbf955c325404068bc614bee611.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/visual-filter-bar/media_17835f9f64b09f168012cae34805aaba4d6ec00b0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1780057817,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the radial micro chart to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1007e89d89f41eaf1ceeca5ceace06bb189984661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1782337426,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.Users define the business logic in a decision table, which includes:                     One or more conditions                     The results that are returned after evaluating the conditions","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/label-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/panel/media_15b8575da3aad93947366e9c9566a844968c490e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label (Web Component)","lastModified":1780057817,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are three switch types: basic, semantic, and with optional text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/switch/media_1c4cad438673e7e8c95747f46022eec2e0114524d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/treemap-chart/media_102283bffb453f5cb670e066ed8adf38f014ef22f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1780057817,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The range slider enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c64ea70b0eec6e0b70495400cd2b78f5a690d732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1782337414,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/smart-filter-bar-annotations/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/smart-filter-bar-annotations/media_10b3bb212111088c2766c6dfcf7de3de41d88c661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1782337425,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows                     users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/step-input-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1782337430,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.You can put the VizFrame control inside the ChartContainer SAPUI5 control. This enables you to place a toolbar above the chart which gives users the ability to switch between a chart view and a table view, as well as switch to full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1782337414,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.The line micro chart supports up to three lines, but we recommend using only one. You can modify the color of each line using the qualitative color palette or semantic patterns for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input (Web Component)","lastModified":1780057817,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1af37aea2cf61df56f80f341a7d74f2174ac5ed37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1782337424,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).The interactive donut chart allows the user to filter by parts of a whole – depending on the sorting this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057817,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780057818,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans","title":"floorplans","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1782337410,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1782337412,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types","title":"page-types","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1782337412,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Self-Contained CardsThe fixed card layout is a layout for the overview page. It comes with                     predefined card characteristics that support automatic, easy and fast card design. The cards have a fixed width, and the height is determined by the card type and the                     embedded control.The cards are ordered in responsive and collapsible columns. The number of columns is also fixed to keep the focus on the middle of the screen and show the set of cards                     in a compact display (a kind of letterboxing). For more information, see Responsiveness.The fixed card layout is one of two layout options for the overview page. The other is the resizable card layout.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1782337411,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Take Action on the Overview PageAs well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This is supported by a special interaction pattern with a set of closely-integrated card types: the stack card, object stream, and quick view card. These three card types are only ever used together, and navigation between them has been optimized to best support user needs.A stack card is a collection of quick view cards, which provide a footer area with actions. These quick view cards are displayed in the object stream (overlay). The advantage of using stack cards is that users don’t have to leave the overview page, and therefore don’t lost their focus.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts","title":"page-layouts","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/initial-page-floorplan/media_18accd21d30a76f979dbcb4221b039446fa6d1798.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1782337411,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059794,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Cards","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Cards","lastModified":1782337412,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards – Harmonized and Powerful InformationEach task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards for one role on a single page .Cards are containers for app content, and represent an entry-level view of the most pertinent app data for a given topic or issue. Technically, a card is a smart component that uses UI annotations to render its content. Cards allow you to show application content from different sources side by side – without requiring the user to switch screens. Cards differ in the content they display: They can show a chart, a list, a table, informative text, or a combination of two elements. However, cards never have editable fields.Cards can focus on a single object or topic, or on a group of objects. Cards can also vary in size, depending on the selected layout.The overview page can contain several cards that reference the same (parent) application. However, each card must bring added value to the user, and not just repeat information already offered on another card.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1782337411,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page/media_10987990b7b041e44a914b702aa39e51da4b32342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1782337411,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Lists with Different FlavorsList cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar chart list card, and link list card. You can also show icons and images. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1782337412,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout is a layout for the . It                     enables users to define a personalized card layout by                     changing not only the position of a card, but also its                     size, and thus how the card content is presented.This layout gives users much greater flexibility in                     tailoring the overview page to their specific business                     needs. And it allows app teams to offer varying levels of detail for any given card. Whenever the size of a card                     changes, the content adapts automatically to show the                     most relevant information in the available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1782337411,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Adaption of standard cardsCustom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card content area. They offer additional flexibility when you require features that are not offered by the standard cards for overview pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/analytical-list-page","title":"Analytical List Page","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page","lastModified":1782337412,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"Analytical list pageThe analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, and to act on transactional content. All this can be done seamlessly within one page. The purpose of the analytical list page is to identify interesting areas within datasets or significant single instances using data visualization and business intelligence.Visualizations help users to recognize facts and situations, and reduce the number of interaction steps needed to gain insights or to identify significant single instances. Chart visualization increases the joy of use, and enables users to spot relevant data more quickly.The main target group are users who work on transactional content. They benefit from fully transparent business object data and direct access to business actions. In addition, they have access to analytical views and functions without having to switch between systems. These include KPIs, a visual filter where filter values are enriched by measures and visualizations, and a combined table/chart view with drill-in capabilities (hybrid view). Users can interact with the chart to dig deep into the data. The visualization enables them to identify spikes, deviations and abnormalities more quickly, and to take appropriate action right away.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782337411,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.The worklist is a versatile floorplan that offers three main variants: a simple worklist (plain page with a table), a worklist with tabs, and a worklist with one or more KPI tags. These variants are based on different user needs and use cases. For more details, see the options under Components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782337413,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.One part of the dynamic page header (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/analytical-list-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780059794,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/analytical-list-page/media_1bce9986520016e88c27baa7a42d785b45086b71a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/letter-boxing/media_1b9793eb36bcd37dcb7e0f6f6875f012c4604a06c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/semantic-page","title":"Semantic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Semantic Page Layout","lastModified":1782337413,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.Using the semantic page significantly reduces the development effort for app teams, and ensures that the placement of the header and footer content conforms with the SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/when-to-use-which-floorplan","title":"When to Use Which Floorplan","version":"","breadcrumbs":"Page Types / When to Use Which Floorplan","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Choosing the right floorplan is not always easy. Roughly speaking, SAP Fiori offers floorplans that:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1038cab413a616913e9b43568a3e103b9fe31d937.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782337413,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.Beforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.As a result, the user can work on several objects simultaneously and switch between them easily.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/overview-page","title":"Overview Page","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page","lastModified":1782337413,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, and view, filter, and react to                     information quickly.Each task or topic is represented by a card (or content container). The overview page acts as a UI framework for organizing multiple cards                     on a single page.The overview page is based on SAP Fiori elements                     technology, and uses annotated views of app data, meaning that the app content can be tailored to the domain or role. Different types of                     card allow you to visualize information in an attractive and efficient way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782337414,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.Flexible column layout - Example with three columnsThe flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.The flexible column layout is already incorporated within SAP Fiori elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782337412,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1782337413,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplan-overview","title":"Layouts and Floorplans","version":"","breadcrumbs":"Page Types / Layouts and Floorplans","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","intro-desc":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/media_1c4d78afccc080f19471585c3c3a457cddaaef55e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP ...","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1782337413,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782337413,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined ...","intro-desc":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/semantic-page/media_128a69021abefd20cd335eeb71738fafed96eaae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059794,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1782337414,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.Since the flexible grid behaves responsively, it is suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/flexible-grid/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059794,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also ...","intro-desc":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/flexible-grid/media_1aa1ad1f3fccb9dbb40debc7533de84f2611f4835.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059794,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/page-layouts/flexible-column-layout/media_1fff41ac96f2713712073296a0276f755b7b1c8fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780059794,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the list report header and content ...","intro-desc":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780059793,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see Worklist in the SAP Fiori Elements section.","intro-desc":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/work-list/media_1da586d19728bbc318a095878202d146cb1bf1aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/page-types/floorplans/object-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780059794,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the object page header, content area, ...","intro-desc":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/page-types/floorplans/object-page/media_19019b5693e276244535676c7aae73d9985b87317.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording","title":"Writing and Wording","version":"","breadcrumbs":"Foundations / Writing and Wording","lastModified":1780059864,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1780059864,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1780059864,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1780059865,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the ...","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1780059864,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The sections below describe the guidelines for each of these texts.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1780059865,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the ...","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/web-assistant","title":"Web Assistant","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Web Assistant","lastModified":1780059865,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Web Assistant provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay ...","intro-desc":"The Web Assistant provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on top of the current application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/media_13bfab4ae6bcc6c39aefca7e82ba6f84cb5a034df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/situation-handling-framework-ui-text-guidelines","title":"Situation Handling Framework – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Situation Handling Framework – UI Text Guidelines","lastModified":1780059865,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline applies for the standard situation templates in the SAP S/4HANA Situation Handling framework. For each standard template, you need to define the following ...","intro-desc":"This guideline applies for the standard situation templates in the SAP S/4HANA Situation Handling framework. For each standard template, you need to define the following texts for key users and end users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/media_17b335e09aa21b896c48f1d65fa0f52b41d2023fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/ui-text-guidelines-for-sap-fiori","title":"UI Text Guidelines for SAP Fiori Apps","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Guidelines for SAP Fiori Apps","lastModified":1780059865,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","intro-desc":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/writing-and-wording/ux-writing/media_1486c8bc4172f44b723e46d4bf6bf48bcf765c128.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1780059960,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_17f216b89aff0cd8c5f23a03026e93560724c041e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1780059958,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet lets you to display a list of actions for the user to choose from. You can also cluster actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1d74d61a6ea00cfc1fb4887cd14e2e92ec5efeecf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/barcode-scanning-mobile-integration","title":"barcode-scanning-mobile-integration","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/avatar-group","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1780059960,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays a set of avatars that represent people.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_18d9d3b2859970a6d07f62467fe37a753914a5003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1780059960,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons allow users to trigger actions – either by clicking the button, or by pressing a corresponding key.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_12ee783e9462388dba440bd20f4d864285dc1731d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1780059959,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a control that has various display options for representing images, icons, and initials.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1923dbdc763deedfff4b08951b3d5ca855e63c934.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1780059958,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_18adc4130bbed88d5181c14d1be4fc12b73caaa66.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/calendar","title":"Calendar","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1780059960,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar control lets users select a single date, multiple days, entire weeks, or a date range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_155170a46787b16919ae15b5680e0013a62e4c89d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1780059960,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1eec51b8ad84c61b3b928c228f0180cd9a75ee387.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/busydialog/media_1f9a594dd551150711f6237b5fc0ef7389e81857a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1780059958,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, including basic user interaction.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_126fc875b4d9441c69c3bfa3196c1c570e5d455b9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1780059958,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"Analytical tables offer powerful options for working with the data, including advanced grouping and aggregations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1e25aba462f6b6987eb18980e8832d8026a719b9a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons allow users to trigger an action. There are 4 button types:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/button/media_18c544dfd01aaa6578bfbd754c1e427746bd44141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059958,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/action-sheet/media_1307ced44ac8cd3751cbe373127338a6dd1b3b55b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ongoing operation covers only part of a screen that has multiple controls, and:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/busy-indicator/media_1e5850f86967e7aaad8da6fb64fe3b410e2ac3941.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059958,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction ...","intro-desc":"You can use the the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/barcode-scanning-mobile-integration/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/barcode-scanning-mobile-integration/media_1af908aa391d2b095e466808e24e2c11b6d22cff4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/avatar-group/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The group type displays overlapping avatars. Use this type if it’s important to display the sum of people at first sight, rather than the individuals. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/avatar-group/media_19bb9eb22bed3e7c10d622a366257f769572da1f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/avatar/media_15102b7539cf535c7971b973554d91d3144c1b110.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, ...","intro-desc":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/calendar/media_1b5dc077d6a4be97ff215f46980530b946997f4f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059959,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059960,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/analytical-table-alv/media_1e7183a20648f018b82be40008d0dcafabad03cb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1782337086,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover. You can use it to offer color selectors on toolbars (for example, triggered by a button). The color picker popover allows users to select any color.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1780059975,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1ffd2fad3a8454e7e31ac1729da5b48d352536563.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1780059975,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel is a control for browsing through a set of items one item at a time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_17bb56bc06426d3f63c66a9976ce763e9c80645f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/cards/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780059975,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1782337086,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color                     from a predefined set of colors. The colors are fixed and                     do not change with the theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/cards","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1780059975,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1780059976,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1782337087,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and                     provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059976,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/color-palette-popover/media_107f2bbe32647762877817cb0b250a23c3bd423e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1780059975,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts. It comes with built-in actions for the table display and personalization.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_196008a5b16ebebc40616abc04f7bf70ef7ec9e06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1782337079,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.If the entries are not validated by the application, users can also enter custom values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059976,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color palette with 15 colors and just one recent color","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/color-palette/media_12ae77a64ad0711d80f1329dc66dfa8895f089415.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059976,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/color-picker/media_1b078aaf0dc5403af74c988e35c55cb41c0a2cc5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059975,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/carousel/media_1dc2820fc95aafa66306509643071ad960bfab90f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059976,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/color-picker-popover/media_1a848c35dcc69fb71fb037a1ff2ab8d67c4815745.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059975,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked ...","intro-desc":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/checkbox/media_1516e8a8e1e723c1a9cda97034cf8f4e44c4ae550.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059975,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-toolbar/media_1cf7192a079b05c8eaaa5a655a78bce14e1c90fd3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059976,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/combo-box/media_18b457f9616bd67c2dac48ec1574a056eab37a024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1782337083,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1782337088,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.In SAPUI5, forms can be built using two different controls:                     Form – sap.ui.layout.form.Form (API)                     Simple form – sap.ui.layout.form.SimpleForm (API) With a form, you can easily layout a list of properties and input fields. A form is structured into form containers. Each form container consists of form elements. And each form element consists of a label and an input field.The simple form control gives you the possibility to achieve the same result as with the form control, but in a much easier way. Inside a simple form, a form control is created along with its form containers and form elements:                     The layout and structure are defined by the content that is entered.                     Form containers and form elements are created automatically according to the content type.                     A title (sap.ui.core.Title (API)) automatically starts a new form group (form container), and a label (sap.m.Label (API)) automatically starts a new row (form element). All other controls following this label will be assigned to its row (form element).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1782337085,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1782337086,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).The smart filter bar is closely related to the filter bar, as it covers the same use cases. The difference is that the smart filter bar uses annotations to create a filter bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1782337086,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1782337086,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/dynamic-date-range","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date","lastModified":1780059992,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A smart control in the smart filter bar that proposes fixed and dynamic dates.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_15c60c560c869e7c48c59237e5d907288a13d1cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"UI Elements / Contextual Filter","lastModified":1780059991,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1ab76372d7ebf97e975c664dbfe919a64ddbb6081.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1782337088,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1782337082,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using                     touch, mouse, or keyboard input. It consists of two                     parts: the date input field and the date picker.Use this control if the user needs to enter a single date                     or a date range. The control also allows users to navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059992,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/footer-toolbar/media_12a3f22e888af82d7f02d0156be07146fe923ea87.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"The date/time picker allows users to select date and time values in a combined input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/datetime-picker/media_149c67e757203a28f03639e2676d5ca3bfecf02c1.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059992,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a ...","intro-desc":"The dialog control (sap.m.Dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/contextual-filter/usage","title":"Contextual Filter","version":"","breadcrumbs":"","lastModified":1780059991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The contextual filter allows you to show a prefiltered view of a list, such as a master list.","intro-desc":"The contextual filter allows you to show a prefiltered view of a list, such as a master list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/contextual-filter/media_1b69ae0b3d3ac963dc28f78000635c7f670daa3fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/dynamic-date-range/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059992,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date is a smart control that is currently only available in the smart filter bar. When the user enters a value in the ...","intro-desc":"The dynamic date is a smart control that is currently only available in the smart filter bar. When the user enters a value in the date field, it suggests corresponding fixed and dynamic dates. It also offers a value help feature that lets users choose between different time periods and define them further. The list of values offered must be defined by the app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/dynamic-date-range/media_1e29c71e2d1aab0c2a0eb2e810c3f2fb1cf468b2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/date-picker/media_1da94e74ba4a2dbee666c10d58a3d53122cee0e52.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059992,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/feedinput/media_17507149571803f0c0e6037d698bf1fbbd373514b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059991,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/date-range-selection/media_1010373f429ea505ded7077888d424bd468d048e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780059992,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of ...","intro-desc":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/filter-bar/media_14628a6397c474b8bfeb9801aa7e5a3855e77f65a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780059992,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/form/media_1ff847ee8a141aae5a3ef199943f59c41742bcc46.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1782337075,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1782337072,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.There are two key use cases:                     You want to let users navigate between different object facets in the object details area. You want to let users filter lists, and give them the option of calling up the entire list, or only items with a specific attribute. In both cases, the user switches between tab pages by clicking the respective tab.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1780060008,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_169b720bbcb5ce455bbf27c5d3032fea82aca85b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1782337075,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The formatted text control displays HTML text. You can                     format the text using HTML tags or embed formatted text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1782337072,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.For more information on the messaging concept for SAP Fiori apps, see the article on message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1782337072,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:                     Filter criteria: The infobar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the infobar if no filter is applied. Selected items: In a multi-select dialog, the infobar shows the number of selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_145a213fa53d2acc2be46d53891379fb77af77971.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1782337072,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid.The grid list is usually used as an alternative view for a list or table. It is ideal for displaying images, charts, object cards, and other content, which profit from more height (but less width).Grid List","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1782337074,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060007,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/generic-tag/media_1587875b87665528a3047fdb684f14cb8ff9911bd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/formatted-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060007,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"By default, the control uses the standard font and headlines. It supports the following HTML tags:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/formatted-text/media_1ad302b9081d3eac381c9202963c8e33714f082fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/html/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060008,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise ...","intro-desc":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/html/media_19b84bf34545fee97d63137d2ec1147dc6fa299fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/html","title":"HTML","version":"","breadcrumbs":"UI Elements / HTML","lastModified":1782337074,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060008,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/infobar/media_1d968d7594ec447608299cd9af27136b5f2f26fcb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060007,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/form-field-validation/media_1a60823b6e3a8d75aaaf96487420c63fce7955bf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060008,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/header-toolbar/media_16211bc4d4ad8145a4c8bbb2e6676c81d00b3112a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060008,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation ...","intro-desc":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/icontabbar/media_13a1e737768ab81e4f53ccbfad8dad52a1207ea86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060008,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays ...","intro-desc":"As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/grid-list/media_1c6f4996ced4493fcb21eea14c8c8febd4853186c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060008,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/grid-table/media_13d9eaa358eb22d8ad8736226ab9bfc07e5d8c2c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1782337072,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1782337074,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1782337075,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1782337073,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize                     the state of individual items in a linear workflow. You                     can embed it into a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1782337075,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of related controls.Every field needs a label. If you use one label for a group of fields, use a combined label and invisible text to label the single fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/menu-button/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The individual button guidelines have been consolidated in one button guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/menu-button/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1782337072,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1782337073,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/message-toast/media_1452174aa65f6fe723d9ba054683dbed46c49f6cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/message-popover/media_1270b62adf573233b59afb2dc4b167afbf197970e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/input-field","title":"Input Field","version":"","breadcrumbs":"UI Elements / Input Field","lastModified":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_168640df3ccffba70615ba464269dbd6ab9697764.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1782337076,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1782337077,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover control can display multiple messages                     of different types in one list. For example, it might show                     several messages related to entries in a form, or messages                     triggered by a finalizing action, such as Save.The message popover is used in conjunction with a technical message manager, which populates the message                     list. If an error occurs at a validation point, the corresponding message is added to message popover                     automatically, without interrupting the user.Users can browse messages by type and navigate to the message details. In some cases, they can also jump                     directly from the message to the affected field on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782337071,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as hyperlink) is an interactive text                     element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be ...","intro-desc":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/message-strip/media_1eba31f0aa0c4f48911248c2f955f363d697da700.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/lightbox/media_178f3edfee6590bd7c938b8cf241e41c930c1a400.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A label is the name or title of a control or group of related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/label/media_1a0ba7b427c7b4049585c99851c6394c2d0a22266.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases ...","intro-desc":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases for showing a message page. The layout is the same, but the text and icon can change depending on the use case. You can use the message page in the following situations:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/message-page/media_19b3345f8fbd87140781b76b898d28019bf5edc19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1782337075,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"UI Elements / Message Page","lastModified":1780060023,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_102b4473ab3c24ec01370227bd3ed9d65eef3a5b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1782337076,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/message-box/media_1f97d52413a076f19f8a1d254f3293f433ac58912.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060024,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The default steps can be replaced by other controls. The following controls are supported:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/micro-process-flow/media_16ad4ea12ff054ea17f03587aa63bf439f3633207.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to ...","intro-desc":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/message-view/media_1963b149b92245274010bd07d287143a19f002174.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The link can either truncate or wrap. Favor wrapping over truncating and keep the link text as short and meaningful as possible.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/link/media_1baef3484015761e8a00e7a19bb9e9807df0fa3b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060024,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable ...","intro-desc":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/multi-combobox/media_1e3e6c14a5314f801efc533c088a8fcc6f20c302b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you ...","intro-desc":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/input-field/media_195a274d7ee02e1e1a463bbfbd6041926962285d4.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1780060039,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the process flow control to represent the stages in a business process (such as approval).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1034d643556c0d7a392ffff83a7d7b05bac922de2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782337088,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display components: object                     status, object identifier, object number, and object marker.                     Each one is connected to an object and displays a certain type                     of information (status, identifier, number, marker).                     Object status: a short text that represents the semantic status of an object                     Object identifier: a short text that represents the key identifier of an object Object number: a short text that represents the numeric                     (key) attribute of an object and its unit                     Object marker: indicates the technical status of an object","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1782337081,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1780060039,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_17a4d74f7eb157d90bbef713c5dec90808d31f0ff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1780060039,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_126ca080cad7de2e9b2a5919204aecef23ea7bb2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1780060039,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see parallel appointments and create new events.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c2d479a9e64de20357b6f99a888481f35f737ae4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1780060039,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A popover displays additional information for an object, and can also offer actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1e214dd1165e3670ab6e0c507dff22baa67530c38.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1782337084,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item’s text sizes are limited due to truncation. The title wraps once and truncates after two lines. The key attribute also truncates ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/object-list-item/media_1f45470c7866e6bf8083da18bf1c214a3a08ea800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such ...","intro-desc":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/popover/media_15102e0a496776448e60352dfb0bb45ec1dd6370a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/p13n-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:","intro-desc":"The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/p13n-dialog/media_137b98d61c8dfe554af203fac3d61db837f19ff3b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/panel/media_15b8575da3aad93947366e9c9566a844968c490e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/object-display-elements/media_1d5e293aa90a85990cd3e79fbc23bdae9e037287e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1780060039,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1363874a3f73836f5da6cce0ced88d37e0f0c0122.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has ...","intro-desc":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/notification-center/media_1c8ee29e0757c7fd4ee733773ccc31da90eb1382e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060038,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can ...","intro-desc":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/multiinput/media_118ca90431c6f7ff1228baa593ca570851c665eaa.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/planning-calendar/media_1d029dd975301f7ba3629ef3938c58002575c9e7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/process-flow/media_170a10537c9177ed12fa47df6a720523c196faa4c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1782337076,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1780060056,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator shows the current completion status for a business process (static value).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_16b4a24f2f8fd91beef9a8e9a8702d0c6c1f4c1d8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1780060056,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The range slider enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c64ea70b0eec6e0b70495400cd2b78f5a690d732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1780060056,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the rating indicator to let users rate content, or to display a content rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1cde5b70b486f81f2e2fede5e8df39a8c9daa1300.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1780060057,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor is a text input control that lets users format the text and insert different types of elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_16177af901fdc26a4940ef75064698a54573136e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1780060056,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_147c4d25afa4cd891d6a5f00e0cd4cfb97dddd3a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782337076,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1780060056,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table is the default table in SAP Fiori. It supports various features at line item level.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_155fc012fa073b8d20e418b02c7d6f5fc3627582c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/radio-button/media_10b58c1999bcb2bbf955c325404068bc614bee611.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","intro-desc":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/range-slider/media_13f5fb9c32b7956325c2620553ac51543f92e4042.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/rating-indicator/media_1ee676b9040e26dda1331065e9ebf76dddfecbcda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/media_18a722a0ebd687c2dfc55b2378d7ee3f7312bbdc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The ...","intro-desc":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/category-navigation/media_1a869f896c04a00bc07b82d2bf49bf79049b56b89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color ...","intro-desc":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/progress-indicator/media_13042cf0dc50209899b709f01d3c1f135c13ed11b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/rich-text-editor/media_166562a37773ca5ed3ebf30f18b5861e28af513ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, ...","intro-desc":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/responsive-table/media_19514703fea1c7b754a26171c02247c81b38e2eb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1780060072,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive and searchable list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1603728142a73c301d6db2b16980e4fac0a754369.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1780060072,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The search field enables users to search for information or filter data by entering key words as text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c2e40222c3b1f486b1dfc7d0164c86027b1cf8e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"UI Elements / Smart Filter Bar","lastModified":1782337072,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. For example, the OData service determines whether a field is visible on the filter bar, and whether it supports type-ahead and value help. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document (metadata.xml).The developer can use annotation properties in the classes ControlConfigurationControlConfiguration and GroupConfigurationGroupConfiguration to adapt the filter bar for the purposes of the app.These annotations let you:                     Determine the type of control (for example, whether a field is shown as a multi-input field or as a date picker)                     Enable the autocomplete suggestions feature Enable the value help dialog                     Overwrite settings from the OData service                     Set custom filter groups                     Add custom fields Access all settings for the underlying filter bar                     You can also use all the configuration options described here in the smart filter bar for the list report SAP Fiori element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1780060072,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1737abaf8277cf86d9c369167e3241877397a3003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-field","title":"Smart Field","version":"","breadcrumbs":"UI Elements / Smart Field","lastModified":1782337073,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1780060072,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1be78841a819a454cfd25ae304e7cf888836b938d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1782337075,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.                     The smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1780060072,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1dfcdc1819c1f733ccedcbbdcac973961700f94ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1782337075,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1782337071,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/shell-bar","title":"Launchpad Shell Bar","version":"","breadcrumbs":"UI Elements / Launchpad Shell Bar","lastModified":1782337073,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item can consist of the following parts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/standard-list-item/media_1c483f2be1625a9997e00728fe2a37fd8123f5361.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and ...","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/smart-link/media_1fc9217782813e0c2c8c06bfd76d6a37237929542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/search/media_173c464bcffb8da1ceed059355bddeceb7346eae8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/shell-bar/media_11ddc43932564566f7831a8366a8f9eb530bcb7b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/select-dialog/media_14c86727a3289429b18d3ad09a8f35a6eb343c378.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/single-planning-calendar/usage","title":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/single-planning-calendar/media_138330fed23841f66ba8e2a21aef216490a306641.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"A slider is a control that enables the user to adjust single values within a specified numerical range.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/slider/media_1e7452b990d893329fb385c25c0afcd94cc5c25dc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/status-indicator/media_1bc6c7913a67a2dcc741c471492e67840791eb762.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-filter-bar-annotations/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar uses annotations to create a filter bar. It’s a wrapper that analyzes a given OData service and renders a filter bar ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/smart-filter-bar-annotations/media_10b3bb212111088c2766c6dfcf7de3de41d88c661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes ...","intro-desc":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/smart-field/media_13982ddaf16d568b28f5fbf53dd98b2079035ecbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. ...","intro-desc":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/smart-table/media_1eb88171a549f303142eb60a57b14f6e63dbb8a43.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1780060087,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_17243cfb7db8a63525e36ddc1c708cd93b9a1e5c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1780060087,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_139f0673721fc998be3c3394ec581b8d3bb3a3b60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1780060088,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_15b11bb6a0f5f9906f39f1c6b5c6e23301854b5b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1782337088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.A common use case is to provide information about changes to an object, or events related to an object. These entries can be added manually or generated by the system (for example, value XY changed from A to B). The latest entry is always on top.Another use case is a feed that is driven by user updates and comments. This feed can also be entirely devoid of machine-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1782337085,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.The title is used, for example, by panel, toolbar, or list components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1780060088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1577adf2c626ba4aae3c6bcb93c56c64106d277b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1780060088,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_121a704525f8ecb7569902864a322e763fca4e245.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1780060088,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1d0daf335006e27ca534061c8966172506d8c7270.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1780060088,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1e654853184a3f217c4ce7597b0ce96b6c9e63141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/token/media_194faf9acf24d104d55a905e852105a56e8d2c817.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/time-picker/media_12a406d32c10b7c1ce5fc5aa7d6d81d5cabdbf227.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/title/media_1297038ce3bb10d6cbe1f34f50d639f7c8f3d11c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"The text area is an input control that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/text-area/media_1cbbe5c019a4f200e4414f5c6a0bf89a6b80711ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/table-select-dialog/media_1429c80d6a6fc0224079b28b3d48696966ec64bea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060087,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/table-personalization-dialog/media_14909b522ff515438df2ea87a5c7c9e50fa42d2af.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/tile/media_134f1b6d74ebc2dc85fa77b8fba9946541e32bcae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060087,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/table-bar/media_163843b8fd5478550baedcb91d0f0a29e66b20474.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1782337083,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.This article gives an overview of what kind of different toolbars exist and when to use which one.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/variant-management","title":"Variant Management","version":"","breadcrumbs":"UI Elements / Variant Management","lastModified":1782337085,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.The variant management control enables the user to load, save, change, and maintain variants.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1782337086,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.Visual filter bar - Size L","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1782337083,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the master list for a master-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.In the case of tree tables and trees, items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single topmost node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tree-toolbar","title":"Tree Toolbar","version":"","breadcrumbs":"UI Elements / Tree Toolbar","lastModified":1780060104,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The tree toolbar always appears above a tree or tree table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_14c69202217ac0c22d00b624861f8437f247a4e51.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/translation-of-textual-user-input","title":"Translation of Textual User Input","version":"","breadcrumbs":"UI Elements / Translation of Textual User Input","lastModified":1782337083,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business                     objects may need to support textual input to be                     translatable into several languages. The use cases for                     translations of texts might be very specific to the                     application context. This guideline will define a pattern                     for a general use case. If your use case differs, use this                     pattern as the basis and adapt it as necessary.The key features of this pattern are:                     The initial maintenance of an object and its translation                     are separate steps. Therefore the maintenance screen of the                     object (in many cases the object page) will accept any textual input in the login language.                     The translation of the textual input is a separate                     (follow up) step. It is done in a separate pop-over dialog focusing solely on the translation task.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1782337085,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1780060104,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1b03b5d66339f5be27f1d0cd6dd483ddbdf4e3da8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1782337088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. You can use the wizard both in full-screen and flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1782337082,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060103,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/translation-of-textual-user-input/media_19826614d2de03b2d74ad812c26c5b0af122e6fca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps users to sort, filter, or group data within a (master) list or a table. The dialog is triggered by icon ...","intro-desc":"The view settings dialog helps users to sort, filter, or group data within a (master) list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/view-settings-dialog/media_14ace2098d6fe3a15057b5cb9e64b1080964f0aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060103,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and ...","intro-desc":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/value-help-dialog/media_1694a8bf6ba6a0dd3c76398a21b032bab6a84e619.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Variants store view settings, such as filter settings or control parameters.","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/variant-management/media_12a408c17dfe95e9fe26b3ea687ed0e25892cbff3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. You can use the wizard both in full-screen and flexible column layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/wizard/media_12fa74cf44582c7a09bd23cafe1868b9fca4fe730.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tree-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","intro-desc":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/tree-toolbar/media_13c16b182e7d7732de73a72320704c8c0f55e4f41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/visual-filter-bar/media_17835f9f64b09f168012cae34805aaba4d6ec00b0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the master list for a master-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/tree/media_102b4185a0ca0f629467d20d20d40a86b98904c15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060104,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/tree-table/media_12c2920fb57e11f0b4a2d61dda3a3659f389b340b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-value-based-legend","title":"chart-value-based-legend","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Time Axis","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1cda229d52f6623987285b35200f9e75e85a422a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1f56d58bb148b3d6da9be7771b4fa25290abf15d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type","title":"choosing-the-correct-chart-type","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Deviation","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the deviation (difference or variance) between two measures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d90cb315472cd4160e37451219d4b27d05b4ddcd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1780060119,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_146e56fe94d51d0b6d6894f5ca69e0a3cc9d998c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1780060118,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb is a type of secondary navigation that indicates the position of a page in a hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_12ae6343e60ce4d2476cd51313af9be064b7aa666.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1780060119,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1977181d19a7a94847955e24ac98332dcb2ab6704.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Comparison","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_17332c2ebe0065b9e8653a1e0fc809ab49973669a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/breadcrumb/media_1f70f4e597867960203d13b1bf92a71682c143341.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-types/media_1bf79942bc727d82c713c0b4f74b1da3b54318965.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it's crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_19aaeb7fb71e579c1fb65563e213112ebbbe6169d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe","title":"chart-vizframe","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Semantic Patterns","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_17ea7ae7794e4c4d22eed1ba4adbc89e6df41d114.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Variation Over Time","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article illustrates the different ways you can visualize changes of measures through time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_18fd1e5ae95cc0dac8d9d23a36d82fc215e65e34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1780060118,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart, which provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_138288a10e29da6edc421acac87be684e05429910.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Legend","lastModified":1782337080,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1edd7bc7cfe6abde044176cb5b48a54486064b031.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1780060118,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1a04121bc30e895d4c592eb53e453df64f1dcd5d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A popover is used to display information or an action related to the selected data points. By default, the chart component:","intro-desc":"A popover is used to display information or an action related to the selected data points. By default, the chart component:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/pop-over/media_1d976adea6b9bb7e8068d4522c6e62d3943e322d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/calculation-builder/media_1d3def708fc38cfa26e99af8543eb9fd25efc0f21.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060118,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List item behavior and interaction is similar for all list item variants and is therefore described in the list overview article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/action-list-item/media_1f83c1cf85753c9b1e8a1eb04ee6d4255f4e99022.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/area-micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1782337088,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.You can put the VizFrame control inside the ChartContainer SAPUI5 control. This enables you to place a toolbar above the chart which gives users the ability to switch between a chart view and a table view, as well as switch to full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/busy-state/media_19e31925732b7db506a2dc38e11219fd4ce721368.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060120,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"","lastModified":1782337080,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Embedding","lastModified":1782337081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1782337081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060120,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/color-palettes/media_110ae4a44b1ffb64ee40d61435ce0279d39a8b0bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Correlation","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The article explains how to use different charts to visualize the relationship between sets of numerical values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d56079cb733ca1637af1d50ac99bf387b32367a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Ranking","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to choose the correct chart for ranking items based on numeric values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_198df7305b7fc5050fa8f61ad0a0933907ae75b12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the previous and next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/calendar-date-interval/media_178563ac253bd90837737ed18517e54e6a77c94cb.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/color-palettes","title":"Chart – Color Palettes","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes","lastModified":1782337081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Part to Whole","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_119bec665a0b300b017f8c5ae26df4bdf6f1f5c7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Popover","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The chart popover displays information or actions related to the selected data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_17392967a4b8c10812c9712fdbbbf37cf095ef0aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval control displays a range of days in a single row, saving on horizontal space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_159178cf3c2b368e0ad5dddffd95820cc92fd1a0b.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Chart types available in VizFrame","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1dfdd6e01f3777b6c79232c808e278af4e5226776.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060119,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1782337074,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Size of the Chart Container","lastModified":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The property \"autoAdjustHeight\" helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1b559114bed77c670f06ad86c970851c850079923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Zoom","lastModified":1782337080,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"xThe user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Reference Lines","lastModified":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Add reference lines to highlight a particular value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_198b5389c27836743e942b0ec9485fbf03a7ad53d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"","lastModified":1782337080,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1782337074,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:                     A small flag indicates that the object is flagged.                     A small star indicates that the object is marked as a favorite.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Selection","lastModified":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes the different ways users can select one or more data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1eb2c60448de4b314876e4f1cac80ed735883fcca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Number and Time Format","lastModified":1782337081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1782337087,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1782337081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060133,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. ...","intro-desc":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/dynamic-side-content/media_1ab37231f356d527e730f0f8f6a643095d210f980.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"x","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060133,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/flag-and-favorite/media_1288c08f30ba550454aab3f58e413088e68a038e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1782337072,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1780060133,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060133,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/export-to-spreadsheet/media_1efd7ed311b72809cbba3e7a8849139cf86c88004.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/values-and-names","title":"Chart – Color Palettes – Values and Names","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes – Values and Names","lastModified":1782337080,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page provides all the color names in the chart palettes.Use Names – Do not use HEX values!Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.You cannot change the HEX values unless you create a new theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1782337073,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.Show Comparison for Selected Items","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1782337084,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1782337074,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/comparison-pattern/media_1874173e325462e926b2d60f21c6997a75e051543.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060133,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in ...","intro-desc":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/generic-mask-input/media_1dc21977208d39eefe0659e6a2f884ca78afad80b.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color names in the chart palettes.","intro-desc":"This page provides all the color names in the chart palettes.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Range Selector","lastModified":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The range selector is a user interface control that enables the user to select a range of data points in a data set.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1365f96e7784d8d23cc3e608f2ac6f83f44d0ef0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1782337076,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060133,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/gantt-chart/media_1f721d7d98f47b056aec5ce86b52cd7791985eac7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1782337075,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows                     content in the form of labels and text.As forms                     are generally the preferred control for combining labels and                     fields, display list items are seldom used.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1782337075,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.The Gantt chart control provides the basis for creating such a Gantt chart and is a generic tool. Applications can consume the control in order to implement their use cases, and if necessary, they may even enhance the control.It consists of three areas: a chart area, a table area, and a global toolbar.Another feature is the option to have a split screen that includes two or more views next to one another, each view consisting of one table and one chart. These views can be arranged vertically or horizontally, and they share a common (global) toolbar. To see an example of the dual view, check out the SAPUI5 highlights video.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1782337081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1782337085,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.There are three main ways to visualize a column micro chart: View with top labels for start and end values, and bottom labels for start and end dates                     Detail view with labels for each vertical bar. This view can be used only if there is enough space for enough bars width in the container.                     No labels. In all cases, the label can be switched off. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060132,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/display-list-item/media_1ef9d9b583d68dbae1d6de46fa81ebd9bc9ebaf95.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1782337088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter by categorical data. Depending on how the data is sorted, this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1782337084,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1782337081,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1782337079,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of                     input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1782337088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1782337080,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.The line micro chart supports up to three lines, but we recommend using only one. You can modify the color of each line using the qualitative color palette or semantic patterns for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1782337082,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter large sets of data by time period. The user can see both the time period and the measure at the same time, where the period is always the horizontal (X) axis of the chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1782337083,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1782337083,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed                     enables SAP Jam users to post comments and reply to posts created by other users. You can use it just for                     collaboration, or offer collaboration alongside application-generated content.Like the timeline, the group feed component shows a series of                     entries in chronological order, such as changes to an object, events related to an object, or user-driven updates and                     comments. The latest entry is always on top.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1782337086,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/input-list-item/media_1727a1535fb03aa6a36332cd9f3b0b4a371ddce3b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to ...","intro-desc":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/invisible-text/media_186d31eac71bab9fb66240ba8d255a9c12371893e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060146,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1780060146,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1e2cd72b19bb1b0af44f2ebc94d9754bc7b6e27ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1782337084,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).The interactive donut chart allows the user to filter by parts of a whole – depending on the sorting this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060146,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the ...","intro-desc":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/image/media_1973724df618bdc87f0a765888465e695d14f2c1d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1780060147,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF Viewer control enables PDF documents to be displayed, printed and downloaded within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1104ffb6229f81504699907017e19ec0b0101d904.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1782337087,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1780060147,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_16b8bc930daf6b444cb9f3d2f7f3faf7241508581.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1780060147,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1a1e444197f8fc9b04e0d4a1101ec7dbda1f2650c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/pdf-viewer/media_1e86b001f5557a5fecbdead76ee727a1418fb919f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/quickview/media_15a7f438d54e699639a460050e72dcab78e1e5934.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1782337085,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.Users define the business logic in a decision table, which includes:                     One or more conditions                     The results that are returned after evaluating the conditions","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1780060147,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the radial micro chart to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1007e89d89f41eaf1ceeca5ceace06bb189984661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/select/media_14f87bdc64bc20d6b1ebe6f4ec6457eb42ef2d9d0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1782337082,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output management control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents, for example). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and offers interaction on those.When triggered by the business application, the output control collects and validates all output parameters, creates the output documents, and outputs them. The possible output parameters handled include what to output, for whom, when, and through which medium.A simple use case is: You choose to e-mail an output document to your customer based on an available form template. The system records the date the output was created and indicates that the output has been sent.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output management control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The ...","intro-desc":"The output management control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents, for example). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and offers interaction on those.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/output-management/media_128a949e30998dc0ce05e5861c4d2b620639af995.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060147,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1782337080,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"UI Elements / Upload Collection","lastModified":1780060161,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_17d611c1b701e4a410b939dd05a9cc53292f92a7f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1780060161,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1e23225dabddd022a02bbfcbdbfb7f7b30c089430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1782337082,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally                     contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/label-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780060162,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1782337085,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows                     users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label (Web Component)","lastModified":1780060162,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1782337083,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1782337084,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.T accounts are usually clustered together, so the accountants can analyze how individual line items from different journal entries affect the ledger balances.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1782337087,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.Examples","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1780060161,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, which can be used together with all existing chart types within VizFrame.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1b5e535ef695b01eb657a3cf549313e842a54898a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the text control if you want to display text inside a form, table, or any other content area. Do not use the text control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/text/media_1ba4c1dbaabebd5068e9280ee2b074ee4ef8f742f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1782337088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are three switch types: basic, semantic, and with optional text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/switch/media_1c4cad438673e7e8c95747f46022eec2e0114524d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060162,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/treemap-chart/media_102283bffb453f5cb670e066ed8adf38f014ef22f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"The step input control allows the user to change the input values in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/step-input/media_170ea2399ca72fea7619733c3aaa853ce9e5e467d.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060161,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060162,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/upload-collection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060162,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP Fiori app. Typically, ...","intro-desc":"The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP Fiori app. Typically, uploaded files appear in an Attachments tab. However, files can also be displayed elsewhere.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/upload-collection/media_11caf05cb4c542372f882b826468aef97dad6e619.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input (Web Component)","lastModified":1780060163,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/ui-elements/media_1af37aea2cf61df56f80f341a7d74f2174ac5ed37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/ui-elements/step-input-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780060163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/typography","title":"typography","version":"","breadcrumbs":"","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/writing-and-wording","title":"writing-and-wording","version":"","breadcrumbs":"","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the ...","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The sections below describe the guidelines for each of these texts.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the ...","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text. (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/typography/typography","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/situation-handling-framework-ui-text-guidelines","title":"Situation Handling Framework – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Situation Handling Framework – UI Text Guidelines","lastModified":1780060556,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline applies for the standard situation templates in the SAP S/4HANA Situation Handling framework. For each standard template, you need to define the following ...","intro-desc":"This guideline applies for the standard situation templates in the SAP S/4HANA Situation Handling framework. For each standard template, you need to define the following texts for key users and end users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/media_17b335e09aa21b896c48f1d65fa0f52b41d2023fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/ui-text-guidelines-for-sap-fiori","title":"UI Text Guidelines for SAP Fiori Apps","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Guidelines for SAP Fiori Apps","lastModified":1780060557,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","intro-desc":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/writing-and-wording/ux-writing/media_1486c8bc4172f44b723e46d4bf6bf48bcf765c128.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782337089,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.The worklist is a versatile floorplan that offers three main variants: a simple worklist (plain page with a table), a worklist with tabs, and a worklist with one or more KPI tags. These variants are based on different user needs and use cases. For more details, see the options under Components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1782337077,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1782337077,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Take Action on the Overview PageAs well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This is supported by a special interaction pattern with a set of closely-integrated card types: the stack card, object stream, and quick view card. These three card types are only ever used together, and navigation between them has been optimized to best support user needs.A stack card is a collection of quick view cards, which provide a footer area with actions. These quick view cards are displayed in the object stream (overlay). The advantage of using stack cards is that users don’t have to leave the overview page, and therefore don’t lost their focus.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page","title":"Overview Page (SAP Fiori Element)","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (SAP Fiori Element)","lastModified":1782337078,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, and view, filter, and react to                     information quickly.Each task or topic is represented by a card (or content container). The overview page acts as a UI framework for organizing multiple cards                     on a single page.The overview page is based on SAP Fiori elements                     technology, and uses annotated views of app data, meaning that the app content can be tailored to the domain or role. Different types of                     card allow you to visualize information in an attractive and efficient way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/analytical-list-page","title":"Analytical List Page","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page","lastModified":1782337077,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"Analytical list pageThe analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, and to act on transactional content. All this can be done seamlessly within one page. The purpose of the analytical list page is to identify interesting areas within datasets or significant single instances using data visualization and business intelligence.Visualizations help users to recognize facts and situations, and reduce the number of interaction steps needed to gain insights or to identify significant single instances. Chart visualization increases the joy of use, and enables users to spot relevant data more quickly.The main target group are users who work on transactional content. They benefit from fully transparent business object data and direct access to business actions. In addition, they have access to analytical views and functions without having to switch between systems. These include KPIs, a visual filter where filter values are enriched by measures and visualizations, and a combined table/chart view with drill-in capabilities (hybrid view). Users can interact with the chart to dig deep into the data. The visualization enables them to identify spikes, deviations and abnormalities more quickly, and to take appropriate action right away.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1782337089,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Adaption of standard cardsCustom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card content area. They offer additional flexibility when you require features that are not offered by the standard cards for overview pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1782337089,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1782337077,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout is a layout for the . It                     enables users to define a personalized card layout by                     changing not only the position of a card, but also its                     size, and thus how the card content is presented.This layout gives users much greater flexibility in                     tailoring the overview page to their specific business                     needs. And it allows app teams to offer varying levels of                     detail for any given card. Whenever the size of a card                     changes, the content adapts automatically to show the                     most relevant information in the available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1782337089,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782337078,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans","title":"floorplans","version":"","breadcrumbs":"","lastModified":1780060559,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Cards","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Cards","lastModified":1782337077,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards – Harmonized and Powerful InformationEach task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards for one role on a single page .Cards are containers for app content, and represent an entry-level view of the most pertinent app data for a given topic or issue. Technically, a card is a smart component that uses UI annotations to render its content. Cards allow you to show application content from different sources side by side – without requiring the user to switch screens. Cards differ in the content they display: They can show a chart, a list, a table, informative text, or a combination of two elements. However, cards never have editable fields.Cards can focus on a single object or topic, or on a group of objects. Cards can also vary in size, depending on the selected layout.The overview page can contain several cards that reference the same (parent) application. However, each card must bring added value to the user, and not just repeat information already offered on another card.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1782337089,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types","title":"page-types","version":"","breadcrumbs":"","lastModified":1780060559,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1782337077,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Self-Contained CardsThe fixed card layout is a layout for the overview page. It comes with                     predefined card characteristics that support automatic, easy and fast card design. The cards have a fixed width, and the height is determined by the card type and the                     embedded control.The cards are ordered in responsive and collapsible columns. The number of columns is also fixed to keep the focus on the middle of the screen and show the set of cards                     in a compact display (a kind of letterboxing). For more information, see Responsiveness.The fixed card layout is one of two layout options for the overview page. The other is the resizable card layout.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1782337089,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Lists with Different FlavorsList cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar chart list card, and link list card. You can also show icons and images. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see Worklist in the SAP Fiori Elements section.","intro-desc":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/work-list/media_1da586d19728bbc318a095878202d146cb1bf1aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060559,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/initial-page-floorplan/media_18accd21d30a76f979dbcb4221b039446fa6d1798.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060561,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060561,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general guidelines for the list report floorplan. Note that some features may not be available if you are using the SAP Fiori ...","intro-desc":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/object-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general guidelines for the object page floorplan. Note that some features may not be available if you are using the SAP Fiori ...","intro-desc":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/object-page/media_1de3c2c66fcc177b7b0b406c8e2b20c89b5c5b7a7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/analytical-list-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060560,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/analytical-list-page/media_100242be137cd2209e94d9ad3109134494d30fc61.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782337078,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout (Layout + SAP Fiori Elements)","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout (Layout + SAP Fiori Elements)","lastModified":1782337079,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1782337078,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/semantic-page","title":"Dynamic Page – Semantic Page","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page – Semantic Page","lastModified":1782337078,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.Using the semantic page significantly reduces the development effort for app teams, and ensures that the placement of the header and footer content conforms with the SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page","lastModified":1782337078,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.One part of the dynamic page header (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1782337079,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.Since the flexible grid behaves responsively, it is suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP ...","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1782337078,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782337078,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.Beforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.As a result, the user can work on several objects simultaneously and switch between them easily.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined ...","intro-desc":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/semantic-page/media_128a69021abefd20cd335eeb71738fafed96eaae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts","title":"page-layouts","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060566,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/letter-boxing/media_13036584642051e84eef657ec734ff388e471730c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/floorplan-overview","title":"Overview – Layouts, Floorplans, and Frameworks","version":"","breadcrumbs":"Page Types / Overview – Layouts, Floorplans, and Frameworks","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori has a simple user interface hierarchy, designed to make the user interaction easy and intuitive. In general, the SAP Fiori launchpad is the ...","intro-desc":"SAP Fiori has a simple user interface hierarchy, designed to make the user interaction easy and intuitive. In general, the SAP Fiori launchpad is the main entry point. All the apps available to a user are presented as tiles in the app finder, while the home page shows a personalized view of tiles the user has selected. The shell bar offers an enterprise search and other services, which are available across all apps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/media_1404ed4030c22a147a130cabb3c677ac8aced0c12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/flexible-grid/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also ...","intro-desc":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/flexible-grid/media_1aa1ad1f3fccb9dbb40debc7533de84f2611f4835.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780060567,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/page-types/page-layouts/flexible-column-layout/media_19a49aa9599337bfb3e5410d464f3afd9b164a826.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources/user-research","title":"user-research","version":"","breadcrumbs":"","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources","title":"resources","version":"","breadcrumbs":"","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources/libraries/design-stencils-for-adobe-xd-2","title":"Design Stencils for Adobe XD","version":"","breadcrumbs":"Resources / Download Design Stencils / Design Stencils for Adobe XD","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use this stencil set to create high-fidelity SAP Fiori designs using Adobe XD.","intro-desc":"You can use this stencil set to create high-fidelity SAP Fiori designs using Adobe XD.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/resources/libraries/media_13da73ae7b7ae3e5e2aeeaca7c13ad296a4a0ee30.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources/libraries","title":"libraries","version":"","breadcrumbs":"","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources/libraries/design-stencils-for-sketch","title":"Design Stencils for Sketch (Mac)","version":"","breadcrumbs":"Resources / Download Design Stencils / Design Stencils for Sketch","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use this stencil set to create high-fidelity SAP Fiori designs using Sketch.","intro-desc":"You can use this stencil set to create high-fidelity SAP Fiori designs using Sketch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/resources/libraries/media_131ff77713fd738b8dd9522de3588a2a4b651551d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources/libraries/design-stencils-for-axure-rp","title":"Design Stencils for Axure RP (Mac and Windows)","version":"","breadcrumbs":"Resources / Download Design Stencils / Design Stencils for Axure RP","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use this stencil set to create high-fidelity SAP Fiori designs using Axure RP.","intro-desc":"You can use this stencil set to create high-fidelity SAP Fiori designs using Axure RP.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/resources/libraries/media_159128a6b386f48ed750c84463ad7a46930fc7bc8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources/downloads","title":"SAP Fiori Design Stencils","version":"","breadcrumbs":"Resources / Libraries / SAP Fiori Design Stencils","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic ...","intro-desc":"Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic impression of your final design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/resources/media_102440fd05dd1d5c262caa664276402a0a7d40e4d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/resources/user-research/how-to-present-your-sap-fiori-app","title":"How to Showcase Your SAP Fiori App","version":"","breadcrumbs":"Resources / User Research / How to Showcase Your SAP Fiori App","lastModified":1780060568,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images ...","intro-desc":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/resources/user-research/media_1557aaaee66e120111fbbc1aed777b3eb651cdf83.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/community","title":"community","version":"","breadcrumbs":"","lastModified":1780060582,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/community/contact-us","title":"Contact Us","version":"","breadcrumbs":"Community / Contact Us","lastModified":1780060582,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community on SAP Jam to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/community/newsletter","title":"Newsletter","version":"","breadcrumbs":"Community / Newsletter","lastModified":1780060582,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Design Newsletter is sent out every two weeks and contains valuable information for all SAP Fiori designers, POs, developers and interested colleagues.","intro-desc":"The SAP Fiori Design Newsletter is sent out every two weeks and contains valuable information for all SAP Fiori designers, POs, developers and interested colleagues.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1780061009,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_126ca080cad7de2e9b2a5919204aecef23ea7bb2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1780061010,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"Analytical tables offer powerful options for working with the data, including advanced grouping and aggregations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1e25aba462f6b6987eb18980e8832d8026a719b9a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1780061009,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart, which provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_138288a10e29da6edc421acac87be684e05429910.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1782336752,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow or by SAP CoPilot.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1780061009,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_18f5b917086190553714fc623a67cb7b6f6fd8db8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1782336753,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter large sets of data by time period. The user can see both the time period and the measure at the same time, where the period is always the horizontal (X) axis of the chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/shell-bar","title":"Launchpad Shell Bar","version":"","breadcrumbs":"UI Elements / Launchpad Shell Bar","lastModified":1782336753,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1780061009,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1a1e444197f8fc9b04e0d4a1101ec7dbda1f2650c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1780061010,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1577adf2c626ba4aae3c6bcb93c56c64106d277b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1780061009,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_17b826d92cc46ba8b148149bc8adb19ef64de548b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1780061011,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1edd7bc7cfe6abde044176cb5b48a54486064b031.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1782336755,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the master list for a master-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.In the case of tree tables and trees, items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single topmost node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1782336754,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/translation-of-textual-user-input","title":"Translation of Textual User Input","version":"","breadcrumbs":"UI Elements / Translation of Textual User Input","lastModified":1782336754,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business objects may need to support textual input to be                     translatable into several languages. The use cases for translations of texts might be very specific to the                     application context. This guideline will define a pattern for a general use case. If your use case differs, use this pattern as the basis and adapt it as necessary.The key features of this pattern are:                     The initial maintenance of an object and its translation are separate steps. Therefore the maintenance screen of                     the object (in many cases the object page) will accept any textual input in the login language.                     The translation of the textual input is a separate (follow up) step. It is done in a separate pop-over dialog                     focusing solely on the translation task.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1782336754,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output management control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents, for example). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and offers interaction on those.When triggered by the business application, the output control collects and validates all output parameters, creates the output documents, and outputs them. The possible output parameters handled include what to output, for whom, when, and through which medium.A simple use case is: You choose to e-mail an output document to your customer based on an available form template. The system records the date the output was created and indicates that the output has been sent.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1782336755,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1780061011,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, which can be used together with all existing chart types within VizFrame.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1b5e535ef695b01eb657a3cf549313e842a54898a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1780061012,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the radial micro chart to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1007e89d89f41eaf1ceeca5ceace06bb189984661.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1780061011,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF Viewer control enables PDF documents to be displayed, printed and downloaded within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1104ffb6229f81504699907017e19ec0b0101d904.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1780061011,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1782336756,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Containing features from the message popover control, the message view control gives you the flexibility to display multiple messages within SAP Fiori.While message view can be embedded within multiple controls, we recommend that you use it only within a responsive popover or a dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1782336756,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1780061013,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1be78841a819a454cfd25ae304e7cf888836b938d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1780061012,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1dfcdc1819c1f733ccedcbbdcac973961700f94ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1782336757,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1782336757,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1780061013,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table is the default table in SAP Fiori. It supports various features at line item level.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_155fc012fa073b8d20e418b02c7d6f5fc3627582c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1780061014,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1b03b5d66339f5be27f1d0cd6dd483ddbdf4e3da8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1782336757,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1782336757,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1782336758,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover (sap.m.MessagePopover) control can                     handle multiple messages within SAP Fiori. In combination                     with a message manager, it automatically displays                     messages that occur after validation points.With the message concept, we provide a way to centrally manage messages and show them to the user without                     additional work for the developer.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1782336758,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.T accounts are usually clustered together, so the accountants can analyze how individual line items from different journal entries affect the ledger balances.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1782336752,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).The interactive donut chart allows the user to filter by parts of a whole – depending on the sorting this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1780061014,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1511d998ce22a8e06ad8b1c18853e5dfbc776ab60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1780061014,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive and searchable list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_16ab7a5506682c5c242cc732071dc430b34804103.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1780061015,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use the process flow control to represent the stages in a business process (such as approval).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c40af8a26e7490461d38e8c6f12150941b7d3649.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1782336752,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.There are three main ways to visualize a column micro chart: View with top labels for start and end values, and bottom labels for start and end dates                     Detail view with labels for each vertical bar. This view can be used only if there is enough space for enough bars width in the container.                     No labels. In all cases, the label can be switched off. You can use either the semantic chart palette or the qualitative chart palette.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1782336752,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links are visualized to stand out from standard, non-clickable text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/variant-management","title":"Variant Management","version":"","breadcrumbs":"UI Elements / Variant Management","lastModified":1782336752,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.The filter settings consist of filter parameters, selection fields, and the layout of filters. They are set within the filter bar.Control parameters are the sort order, filter and group settings, column visibility, and the layout of a table or chart. They are set within the toolbar of the control.The variant management control enables the user to load, save, change, and maintain variants.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar Annotations","version":"","breadcrumbs":"UI Elements / Smart Filter Bar Annotations","lastModified":1780061015,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The smart filter bar is a wrapper that analyzes a given OData service and renders a filter bar based on the content defined by the service. To configure more settings or overwrite the settings from the OData service, the developer can set additional annotations in an external document.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1780061017,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1e654853184a3f217c4ce7597b0ce96b6c9e63141.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"UI Elements / Upload Collection","lastModified":1780061016,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_17d611c1b701e4a410b939dd05a9cc53292f92a7f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1780061017,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1780061016,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel is a control for browsing through a set of items one item at a time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_121dffe7ea4168d3307dc231e272bcbb774cd69f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1782336753,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.Users define the business logic in a decision table, which includes:                     One or more conditions                     The results that are returned after evaluating the conditions","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1782336753,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows                     users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1782336753,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.The title is used, for example, by panel, toolbar, or list components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1780061016,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The search field enables users to search for information or filter data by entering key words as text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c2e40222c3b1f486b1dfc7d0164c86027b1cf8e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1782336753,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1782336753,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1780061018,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1ffd2fad3a8454e7e31ac1729da5b48d352536563.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1780061018,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_14fe58e3e022afb1963deeb98ea524334d2deb7a6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1782336754,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover. You can use it to offer color selectors on toolbars (for example, triggered by a button). The color picker popover allows users to select any color.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1780061018,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1e23225dabddd022a02bbfcbdbfb7f7b30c089430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1782336754,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1782336754,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.The visual filter bar allows users to combine measures with filter values. For example, a “Product” might have the filter value “Product Name” and the measure might typically be “Revenue”, “Cost”, or “Quantity”. If you opt for the measure “Revenue”, the chart would show the “Revenue by Product”, enabling the user to filter the data by choosing a particular product name and its revenue.Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: bar chart, line chart and donut chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"UI Elements / Menu Button","lastModified":1782336754,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"Unlike a regular button, the menu button features an expand icon that triggers a dropdown menu (sap.ui.unified.Menu). The menu button was introduced to address numerous limitations of the action sheet. By default, the menu is positioned below the button, but it can also be displayed above if there is not enough space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_14b7b18194a7fd2e0a928531f8e314800eba38f52.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1780061018,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The smart link triggers a popover with additional information and links to related apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1175715c436a0d7e91e230fea486b109e4970a836.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1780061019,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a control that has various display options for representing images, icons, and initials.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1923dbdc763deedfff4b08951b3d5ca855e63c934.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1780061019,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_146e56fe94d51d0b6d6894f5ca69e0a3cc9d998c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1782336755,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of                     related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1782336755,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1782336755,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1780061019,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1d0daf335006e27ca534061c8966172506d8c7270.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1782336755,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.Examples","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1780061020,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_15b11bb6a0f5f9906f39f1c6b5c6e23301854b5b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1782336756,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).It allows the user to filter by categorical data. Depending on how the data is sorted, this would be the biggest or the smallest filter values by measure.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1782336756,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1780061021,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_17243cfb7db8a63525e36ddc1c708cd93b9a1e5c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1780061020,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1780061021,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_121a704525f8ecb7569902864a322e763fca4e245.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1780061021,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb is a type of secondary navigation that indicates the position of a page in a hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_12ae6343e60ce4d2476cd51313af9be064b7aa666.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1780061021,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_18adc4130bbed88d5181c14d1be4fc12b73caaa66.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1782336756,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1780061021,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor is a text input control that lets users format the text and insert different types of elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_16177af901fdc26a4940ef75064698a54573136e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1780061022,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the rating indicator to let users rate content, or to display a content rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1a618a3706498d9b4a18127ac997ab8999e04e0a1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1780061021,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1eec51b8ad84c61b3b928c228f0180cd9a75ee387.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1780061022,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval control displays a range of days in a single row, saving on horizontal space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_159178cf3c2b368e0ad5dddffd95820cc92fd1a0b.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1782336757,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.A common use case is to provide information about changes to an object, or events related to an object. These entries can be added manually or generated by the system (for example, value XY changed from A to B). The latest entry is always on top.Another use case is a feed that is driven by user updates and comments. This feed can also be entirely devoid of machine-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1782336757,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. You can use the wizard both in full-screen and flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1782336758,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1780061023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The range slider enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_167b1433b2e3daa6b0ad6aa29e6bdafb8d72f5701.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1782336758,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1782336758,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.The line micro chart supports up to three lines, but we recommend using only one. You can modify the color of each line using the qualitative color palette or semantic patterns for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1782336758,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.This article gives an overview of what kind of different toolbars exist and when to use which one.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"UI Elements / Message Page","lastModified":1780061023,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_102b4473ab3c24ec01370227bd3ed9d65eef3a5b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1780061024,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see parallel appointments and create new events.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c2d479a9e64de20357b6f99a888481f35f737ae4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1782336758,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1780061024,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_16b8bc930daf6b444cb9f3d2f7f3faf7241508581.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"","lastModified":1782336758,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Embedding","lastModified":1782336759,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1782336759,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/color-palettes","title":"Chart – Color Palettes","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes","lastModified":1782336759,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1780061025,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1977181d19a7a94847955e24ac98332dcb2ab6704.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1780061025,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_139f0673721fc998be3c3394ec581b8d3bb3a3b60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1780061025,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A popover displays additional information for an object, and can also offer actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_16b879264acf1546a1ee958c3b3924f46cdd4c1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1780061025,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1780061025,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1737abaf8277cf86d9c369167e3241877397a3003.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1782336759,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.The smart table creates columns automatically based on the underlying OData service plus corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, and export to spreadsheet.Everything that can be done using the smart table can also be achieved using the responsive table, grid table, analytical table, or tree table directly, but with more development effort. Therefore, the main purpose of the smart table is to reduce development effort. However, this comes at the expense of decreased flexibility.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1782336760,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1780061026,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1f56d58bb148b3d6da9be7771b4fa25290abf15d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1782336760,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1782336758,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1782336759,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize the state of individual items in a linear workflow, and is suitable for embedding into a list or a table.Micro process flow in a responsive table","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1780061026,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_15b0422b7e582e1ddc7ce9908fbc1b3e41c7e8b79.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1782336760,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1780061027,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator shows the current completion status for a business process (static value).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1a30d1f0577ea586e6fe0c73b8eb57620c879cbd1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1780061027,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_17f216b89aff0cd8c5f23a03026e93560724c041e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1782336760,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally                     contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061028,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An action sheet consists of a list of options from which the user can select to complete an action. Actions can be clustered if there ...","intro-desc":"An action sheet consists of a list of options from which the user can select to complete an action. Actions can be clustered if there is not enough space on the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/action-sheet/media_1ab7ae685f3b81b19d02a2ead622c42eed5e5d3b6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1780061027,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet lets you to display a list of actions for the user to choose from. You can also cluster actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1be9b5a857be7fc16284e6d2c1333f96dae231b5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/cards","title":"Cards","version":"","breadcrumbs":"UI Elements / Cards","lastModified":1780061027,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/cards/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780061027,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Size of the Chart Container","lastModified":1780061028,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The property \"autoAdjustHeight\" helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1b559114bed77c670f06ad86c970851c850079923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Number and Time Format","lastModified":1782336769,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061028,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1782336769,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061028,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061029,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/label-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780061029,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label (Web Component)","lastModified":1780061029,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061031,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1782336770,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1782336768,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.The control provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.If the entries are not validated by the application, users can also enter custom values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input (Web Component)","lastModified":1780061030,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1af37aea2cf61df56f80f341a7d74f2174ac5ed37.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Semantic Patterns","lastModified":1780061030,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_17ea7ae7794e4c4d22eed1ba4adbc89e6df41d114.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/step-input-web-component/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1780061029,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"","lastModified":1782336760,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1782336769,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of                     input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Popover","lastModified":1780061030,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The chart popover displays information or actions related to the selected data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_17392967a4b8c10812c9712fdbbbf37cf095ef0aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Selection","lastModified":1780061031,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article describes the different ways users can select one or more data points.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1eb2c60448de4b314876e4f1cac80ed735883fcca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Legend","lastModified":1782336761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Range Selector","lastModified":1780061032,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The range selector is a user interface control that enables the user to select a range of data points in a data set.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1365f96e7784d8d23cc3e608f2ac6f83f44d0ef0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Zoom","lastModified":1782336761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"xThe user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/values-and-names","title":"Chart – Color Palettes – Values and Names","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Color Palettes – Values and Names","lastModified":1782336761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page provides all the color names in the chart palettes.Use Names – Do not use HEX values!Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.You cannot change the HEX values unless you create a new theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Ranking","lastModified":1780061032,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to choose the correct chart for ranking items based on numeric values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_198df7305b7fc5050fa8f61ad0a0933907ae75b12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Comparison","lastModified":1780061032,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_17332c2ebe0065b9e8653a1e0fc809ab49973669a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Time Axis","lastModified":1780061032,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1cda229d52f6623987285b35200f9e75e85a422a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Variation Over Time","lastModified":1780061032,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article illustrates the different ways you can visualize changes of measures through time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_18fd1e5ae95cc0dac8d9d23a36d82fc215e65e34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1782336761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Deviation","lastModified":1780061033,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to visualize the deviation (difference or variance) between two measures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d90cb315472cd4160e37451219d4b27d05b4ddcd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Correlation","lastModified":1780061033,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The article explains how to use different charts to visualize the relationship between sets of numerical values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_1d56079cb733ca1637af1d50ac99bf387b32367a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Part to Whole","lastModified":1780061033,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/media_119bec665a0b300b017f8c5ae26df4bdf6f1f5c7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Reference Lines","lastModified":1780061033,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Add reference lines to highlight a particular value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_198b5389c27836743e942b0ec9485fbf03a7ad53d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1780061034,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1fd1d900b0130ee51f04c7ef8362e293b298deea2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/dynamic-date-range","title":"Dynamic Date","version":"","breadcrumbs":"UI Elements / Dynamic Date (Smart Filter Bar)","lastModified":1782336761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The dynamic date is a smart control that is currently only available in the smart filter bar. When the user enters a value in the date field, it suggests corresponding fixed and dynamic dates. It also offers a value help feature that lets users choose between different time periods and define them further. The list of values offered must be defined by the app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_15c60c560c869e7c48c59237e5d907288a13d1cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1782336762,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation within SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.For more information on the messaging concept for SAP Fiori apps, see the article on message handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1782336761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid.The grid list is usually used as an alternative view for a list or table. It is ideal for displaying images, charts, object cards, and other content, which profit from more height (but less width).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1782336762,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/infobar","title":"Info Bar","version":"","breadcrumbs":"UI Elements / Info Bar","lastModified":1782336762,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The info bar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:                     Filter criteria: The info bar indicates the filter criteria that have been applied for a filter or contextual filter. Do not show the info bar if no filter is applied. Selected items: In a multi-select dialog, the info bar shows the number of selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_18ef09bf3c4d072904b05c2e4fd942d00d05e7e64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1782336762,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1780061035,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts. It comes with built-in actions for the table display and personalization.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_196008a5b16ebebc40616abc04f7bf70ef7ec9e06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/input-field","title":"Input Field","version":"","breadcrumbs":"UI Elements / Input Field","lastModified":1780061034,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_168640df3ccffba70615ba464269dbd6ab9697764.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1782336762,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1782336762,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1782336762,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.Show Comparison for Selected Items","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1782336762,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1782336762,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1782336763,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.Use this control if the user needs to enter a single date or a date range. The control also allows users to navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1780061036,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1a04121bc30e895d4c592eb53e453df64f1dcd5d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1780061036,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1782336763,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:                     A small flag indicates that the object is flagged.                     A small star indicates that the object is marked as a favorite.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1782336763,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1782336764,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1782336764,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1782336765,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1782336764,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color                     from a predefined set of colors. The colors are fixed and                     do not change with the theme.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1782336765,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.The Gantt chart control provides the basis for creating such a Gantt chart and is a generic tool. Applications can consume the control in order to implement their use cases, and if necessary, they may even enhance the control.It consists of three areas: a chart area, a table area, and a global toolbar.Another feature is the option to have a split screen that includes two or more views next to one another, each view consisting of one table and one chart. These views can be arranged vertically or horizontally, and they share a common (global) toolbar. To see an example of the dual view, check out the SAPUI5 highlights video.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1782336765,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed                     enables SAP Jam users to post comments and reply to posts created by other users. You can use it just for                     collaboration, or offer collaboration alongside application-generated content.Like the timeline, the group feed component shows a series of                     entries in chronological order, such as changes to an object, events related to an object, or user-driven updates and                     comments. The latest entry is always on top.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1782336764,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1782336765,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows                     content in the form of labels and text.As forms                     are generally the preferred control for combining labels and                     fields, display list items are seldom used.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1782336765,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1782336765,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.In SAPUI5, forms can be built using two different controls:                     Form – sap.ui.layout.form.Form (API)                     Simple form – sap.ui.layout.form.SimpleForm (API) With a form, you can easily layout a list of properties and input fields. A form is structured into form containers. Each form container consists of form elements. And each form element consists of a label and an input field.The simple form control gives you the possibility to achieve the same result as with the form control, but in a much easier way. Inside a simple form, a form control is created along with its form containers and form elements:                     The layout and structure are defined by the content that is entered.                     Form containers and form elements are created automatically according to the content type.                     A title (sap.ui.core.Title (API)) automatically starts a new form group (form container), and a label (sap.m.Label (API)) automatically starts a new row (form element). All other controls following this label will be assigned to its row (form element).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1780061038,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1e2cd72b19bb1b0af44f2ebc94d9754bc7b6e27ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1780061038,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, including basic user interaction.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_126fc875b4d9441c69c3bfa3196c1c570e5d455b9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"UI Elements / Contextual Filter","lastModified":1780061038,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1ab76372d7ebf97e975c664dbfe919a64ddbb6081.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1782336765,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1782336765,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.You can put the VizFrame control inside the ChartContainer SAPUI5 control. This enables you to place a toolbar above the chart which gives users the ability to switch between a chart view and a table view, as well as switch to full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1780061039,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/media_15a11510838c3490e36031d45ce1a7ec49376ba8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-value-based-legend","title":"chart-value-based-legend","version":"","breadcrumbs":"","lastModified":1780061038,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/barcode-scanning-mobile-integration","title":"barcode-scanning-mobile-integration","version":"","breadcrumbs":"","lastModified":1780061038,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type","title":"choosing-the-correct-chart-type","version":"","breadcrumbs":"","lastModified":1780061039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe","title":"chart-vizframe","version":"","breadcrumbs":"","lastModified":1780061039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/button","title":"button","version":"","breadcrumbs":"","lastModified":1780061039,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780061040,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"There are four types of object display components: object status, object identifier, object number, and object marker. Each one is connected to an object and displays a certain type of information (status, identifier, number, marker).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/object-display-elements/media_1b6a9fc6201c234137a68db01fb3873dc91938ea7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can ...","intro-desc":"A multi-input field allows the user to enter multiple values, which are displayed as tokens. To help the user enter a valid value, you can enable the suggestions feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/multiinput/media_118ca90431c6f7ff1228baa593ca570851c665eaa.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps the user to sort, filter, or group data within a (master) list or a table. The dialog is triggered by ...","intro-desc":"The view settings dialog helps the user to sort, filter, or group data within a (master) list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/view-settings-dialog/media_1c7a97de044ff376ac18f3d031cd7b2c050b09ded.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and ...","intro-desc":"The value help dialog is a UI pattern that helps the user find and select single and multiple values. The user can also define and select multiple ranges. The value help dialog is generally called from an input field or a multi-input field by clicking the selection icon (value help icon) of the input field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/value-help-dialog/media_19e1a98b97969bb5531d41cb95dcd691aaa5cb7d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. You can use the wizard both in full-screen and flexible column layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/wizard/media_12fa74cf44582c7a09bd23cafe1868b9fca4fe730.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061044,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/combo-box/media_15c9c290b46babdc1cf16e50f05cafcea2a9a7ead.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061041,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/input-list-item/media_1727a1535fb03aa6a36332cd9f3b0b4a371ddce3b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780061041,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/analytical-table-alv/media_19cd9e445bac393cad07fb7eceb57d682e8e05b81.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"x","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061042,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061043,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061044,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061044,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061044,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061044,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choosing-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061045,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A popover is used to display information or an action related to the selected data points. By default, the chart component:","intro-desc":"A popover is used to display information or an action related to the selected data points. By default, the chart component:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/pop-over/media_1d976adea6b9bb7e8068d4522c6e62d3943e322d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type","lastModified":1780061046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it's crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_19aaeb7fb71e579c1fb65563e213112ebbbe6169d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061046,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color names in the chart palettes.","intro-desc":"This page provides all the color names in the chart palettes.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"[internal_only]","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-types/media_1bf79942bc727d82c713c0b4f74b1da3b54318965.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1780061047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Chart types available in VizFrame","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/media_1dfdd6e01f3777b6c79232c808e278af4e5226776.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780061048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/dynamic-date-range/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date is a smart control that is currently only available in the smart filter bar. When the user enters a value in the ...","intro-desc":"The dynamic date is a smart control that is currently only available in the smart filter bar. When the user enters a value in the date field, it suggests corresponding fixed and dynamic dates. It also offers a value help feature that lets users choose between different time periods and define them further. The list of values offered must be defined by the app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/dynamic-date-range/media_133bf5870e752667d7d74e36b32db9f2873539935.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation within SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation within SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/form-field-validation/media_18b5d7b85e18bf41d2fcc1d3eae2f3c9a2c31fe2f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation ...","intro-desc":"The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/icontabbar/media_1489f67632e1696f51344c552f6dda7d299690052.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays ...","intro-desc":"As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/grid-list/media_14fc3b3a66f7eddaf3426d1f0059fdc0fd465a027.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a ...","intro-desc":"The dialog control (sap.m.dialog) interrupts the current app process to prompt the user for information or for a response. It forces a decision or a confirmation that needs to be signed off by the user.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/dialog/media_1498cd81ed9b8c80207e5d215fdfcbd92ab94fa1e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-toolbar/media_1cd5648293ca233d83d0ac123a968ff3d758cc818.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The info bar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The info bar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/infobar/media_1261b46c8a56e1267c7aa531425f7997d8d1a67c3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"The date/time picker allows users to select date and time values in a combined input.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you ...","intro-desc":"A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, you can enable the autocomplete suggestion feature and the value help option.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/input-field/media_11afa6f548cc35f44cf2c199841108bb8366f70fb.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/comparison-pattern/media_1874173e325462e926b2d60f21c6997a75e051543.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/generic-tag/media_1868fc22c4a87c909a16b05cd073f60ddcdf565b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and ...","intro-desc":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/date-picker/media_1c8bc220ee4e228e583cb4140bdc6e86ff833ad47.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. ...","intro-desc":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen. It is displayed in a way that flexibly adapts to different screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/dynamic-side-content/media_1ab37231f356d527e730f0f8f6a643095d210f980.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The ongoing operation covers only part of a screen that has multiple controls, and:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/busy-indicator/media_14606b0038531afb01511a35c1b842ba5ba071544.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List item behavior and interaction is similar for all list item variants and is therefore described in the list overview article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/action-list-item/media_1f83c1cf85753c9b1e8a1eb04ee6d4255f4e99022.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/footer-toolbar/media_1ead69f5d02bdc97a5820517ab965fd2df5d27bbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/export-to-spreadsheet/media_1efd7ed311b72809cbba3e7a8849139cf86c88004.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/flag-and-favorite/media_1288c08f30ba550454aab3f58e413088e68a038e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of ...","intro-desc":"The filter bar filters item lists and tables according to various filter criteria. You can use it for both simple and complex lists, regardless of their size. To handle complex lists with multiple filters, the filter bar provides predefined, customizable filter sets (variants).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/filter-bar/media_12d8974f96833bdbd7b15fe9a44b7a47f51ac9a5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the ...","intro-desc":"Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/image/media_1973724df618bdc87f0a765888465e695d14f2c1d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in ...","intro-desc":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/generic-mask-input/media_1dc21977208d39eefe0659e6a2f884ca78afad80b.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Users can select a color with the left mouse button, the tap gesture, or by pressing SPACE or ENTER on a keyboard. The selected color ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/gantt-chart/media_1f721d7d98f47b056aec5ce86b52cd7791985eac7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/grid-table/media_1bcdc95c1ffefa07ed94efc0faada7931824ac1ff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/display-list-item/media_1ef9d9b583d68dbae1d6de46fa81ebd9bc9ebaf95.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1780061060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/form/media_1ca540dd57a79886a5734ad35141127995418a13e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, ...","intro-desc":"The control for selecting the date range is a single-field input control. Users can enter a localized date range using touch, mouse, or keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/date-range-selection/media_1010373f429ea505ded7077888d424bd468d048e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction ...","intro-desc":"You can use the the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/contextual-filter/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The contextual filter allows you to show a prefiltered view of a list, such as a master list.","intro-desc":"The contextual filter allows you to show a prefiltered view of a list, such as a master list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/contextual-filter/media_1b69ae0b3d3ac963dc28f78000635c7f670daa3fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/feedinput/media_1b4810e543b16f282e56b982d83fd8f159fe1bd1c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/barcode-scanning-mobile-integration/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/barcode-scanning-mobile-integration/media_14cef05a5b3eeb84d3a1b7626a9f22a422dd3e54c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases ...","intro-desc":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases for showing a message page. The layout is the same, but the text and icon can change depending on the use case. You can use the message page in the following situations:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/message-page/media_112eec144bc5832f54399e2b1c4b8c79dd58c4b68.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/header-toolbar/media_1ea5306d26866a959819c9202ec5bf2fa44b47c7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/planning-calendar/media_1298fd082fd7b10b32b10c58141189e3c07c559e0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/select/media_14f87bdc64bc20d6b1ebe6f4ec6457eb42ef2d9d0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/treemap-chart/media_102283bffb453f5cb670e066ed8adf38f014ef22f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/chart-vizframe/color-palettes/media_110ae4a44b1ffb64ee40d61435ce0279d39a8b0bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061062,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/calculation-builder/media_1d3def708fc38cfa26e99af8543eb9fd25efc0f21.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/busy-state/media_19e31925732b7db506a2dc38e11219fd4ce721368.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The micro process flow control enables you to visualize the state of individual items in a linear workflow, and is suitable for embedding into a ...","intro-desc":"The micro process flow control enables you to visualize the state of individual items in a linear workflow, and is suitable for embedding into a list or a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/micro-process-flow/media_164c5e29959bd796ff9a55a29203d5ef06cadf40e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color ...","intro-desc":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/progress-indicator/media_18b22ffa034bbe89c9f5aff5546a696fdb2959ad7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061066,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/tree-table/media_17f884940d943e2a2608f98e8b5989dcdf9aab2d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the text control if you want to display text inside a form, table, or any other content area. Do not use the text control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/text/media_1ba4c1dbaabebd5068e9280ee2b074ee4ef8f742f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061067,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable ...","intro-desc":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/multi-combobox/media_1a01c4d584f36b91519ce4eda459a1dbc97ffa4cc.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such ...","intro-desc":"The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/popover/media_174918356ae7ddc0aaf2935016962571d9dce89df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061065,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/toolbar-overview/media_100fc320d92f9d30f23cdebeb71521627533e083e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061065,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item can contain an icon (in the form of an image or from the SAP icon font), a title (left-aligned), a short ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/standard-list-item/media_14101b097f68be461a17012df9dfbe0629bcdebb9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780061065,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-table/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1780061068,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines, see the corresponding table articles (Responsive Table, Grid ...","intro-desc":"The smart table is a wrapper around existing tables, and can be used together with the responsive table, grid table, analytical table, or tree table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/smart-table/media_11f19a94eaec26f5def0f71bde2b96ddb4fc6cc73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061067,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/table-personalization-dialog/media_14909b522ff515438df2ea87a5c7c9e50fa42d2af.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1780061066,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1780061066,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061065,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to ...","intro-desc":"The invisible text control provides a simple hidden text which can be used by assistive technologies such as screen readers to provide contextual information to sighted users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/invisible-text/media_186d31eac71bab9fb66240ba8d255a9c12371893e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061066,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/pdf-viewer/media_1e86b001f5557a5fecbdead76ee727a1418fb919f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061067,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061068,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Containing features from the message popover control, the message view control gives you the flexibility to display multiple messages within SAP Fiori.","intro-desc":"Containing features from the message popover control, the message view control gives you the flexibility to display multiple messages within SAP Fiori.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/message-view/media_13ed9a48846332aaf6223d2dc8c5d5613f70920ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061068,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator can be embedded in other controls, including but not limited to the following:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/status-indicator/media_1bc6c7913a67a2dcc741c471492e67840791eb762.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061069,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover (sap.m.MessagePopover) control can handle multiple messages within SAP Fiori. In combination with a message manager, it automatically displays messages that occur after ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/message-popover/media_15cc9ddef6a696ae0d20aa40398d1aa3b0c55e12c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/upload-collection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061070,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP Fiori app. Typically, ...","intro-desc":"The upload collection control allows users to upload single or multiple files from a device (desktop, tablet, or phone) to the SAP Fiori app. Typically, uploaded files appear in an Attachments tab. However, files can also be displayed elsewhere.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/upload-collection/media_11caf05cb4c542372f882b826468aef97dad6e619.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061069,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061069,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/carousel/media_1249ab212ce37087322c49b9bc95b64497755eba7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061069,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/search/media_1eb85c548f47eb7076c0fcec97e3106041f0d0bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061069,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks or taps the checkbox, it toggles between checked and ...","intro-desc":"A checkbox lets the user set a binary value (such as “true/false”). When the user clicks or taps the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/checkbox/media_1516e8a8e1e723c1a9cda97034cf8f4e44c4ae550.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061070,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","intro-desc":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/panel/media_14079c09c35a976c6c5613dbd396f9227bac3fce0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061070,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, or business-related images, such as product pictures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/avatar/media_15102b7539cf535c7971b973554d91d3144c1b110.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/menu-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Unlike a regular button, the menu button features an expand icon that triggers a dropdown menu (sap.ui.unified.Menu). The menu button was introduced to address numerous ...","intro-desc":"Unlike a regular button, the menu button features an expand icon that triggers a dropdown menu (sap.ui.unified.Menu). The menu button was introduced to address numerous limitations of the action sheet. By default, the menu is positioned below the button, but it can also be displayed above if there is not enough space.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/menu-button/media_143cecdd474d5b2a694971884c6500afabda6bf3e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/color-picker/media_1bc87e9a0e3654691020a26de06a788a6c91c2d08.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/token/media_1e94901d6b735c65a47ad0674e356400c2414a7d2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"The text area is an input control that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/text-area/media_1cbbe5c019a4f200e4414f5c6a0bf89a6b80711ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/timeline/media_1b44ebfd7e647f8a7efc2a7ac4b83a3a4af8c71be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/busydialog/media_14f9acab29b4bcdec79a3b0e1407e6d854fdb568f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061072,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/quickview/media_15a7f438d54e699639a460050e72dcab78e1e5934.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/p13n-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:","intro-desc":"The p13n dialog control provides a dialog for tables that allows the user to personalize one or more of the following attributes:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/p13n-dialog/media_1e13c2de2c0867ce51d435f3e137f9b628e0e756d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A slider is a control that enables the user to adjust single values within a specified numerical range.","intro-desc":"A slider is a control that enables the user to adjust single values within a specified numerical range.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/slider/media_152bcbdb31f26f9cabc8c73daebd1bc2ae4341e27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has ...","intro-desc":"Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow or by SAP CoPilot.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/notification-center/media_14e94c2857027af554914771aaaf1c3f48f703641.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item is mainly used in the master list of SAP Fiori apps, where it primarily offers a quick overview of an object ...","intro-desc":"The object list item is mainly used in the master list of SAP Fiori apps, where it primarily offers a quick overview of an object within a list. The text sizes are limited (before the text truncates) and object list items usually allow the user to navigate to the details of an object. Therefore, the object list item should only contain essential information that is necessary for the user to identify which object to work on first. Long descriptive texts should be avoided.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/object-list-item/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/tile/media_134f1b6d74ebc2dc85fa77b8fba9946541e32bcae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","intro-desc":"The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/shell-bar/media_11ddc43932564566f7831a8366a8f9eb530bcb7b5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be ...","intro-desc":"The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/message-strip/media_16d338198b0242877f0ed569ea110d7fd11c78191.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/area-micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061076,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/translation-of-textual-user-input/media_19826614d2de03b2d74ad812c26c5b0af122e6fca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output management control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The ...","intro-desc":"The output management control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents, for example). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and offers interaction on those.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/output-management/media_128a949e30998dc0ce05e5861c4d2b620639af995.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061075,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the master list for a master-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/tree/media_1754313fc3fd2a2533f131cb6c69cd51d5a1d0b41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061076,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061077,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/message-toast/media_112d9958196ec69a8037f43cbf6f214ee509808aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/single-planning-calendar/usage","title":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","version":"","breadcrumbs":"","lastModified":1780061078,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/single-planning-calendar/media_1c7b1ac092c7a595d5ee253c225570fd52760143b.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061078,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The ...","intro-desc":"Category navigation is a rarely used pattern which can be used to replace tree-like structures with only a few levels in a responsive environment. The breadcrumb control replaces the title control in the category navigation pattern.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/category-navigation/media_1a869f896c04a00bc07b82d2bf49bf79049b56b89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061077,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/media_18a722a0ebd687c2dfc55b2378d7ee3f7312bbdc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061078,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061087,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, ...","intro-desc":"The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/responsive-table/media_13a2f22a7e743704f7832100fdfe2d0f721bd4694.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/select-dialog/media_1ce81916a1c071d05d35587b7162bc8fb2edac556.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/process-flow/media_18897a0f79eb7ca16d7cbd3e4fd058f32b9ccd62a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061078,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/radio-button/media_1744f87f1312359d494e2b079082cf551152fb9b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Variants store view settings, such as filter settings or control parameters.","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/variant-management/media_12a408c17dfe95e9fe26b3ea687ed0e25892cbff3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links ...","intro-desc":"A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links are visualized to stand out from standard, non-clickable text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/link/media_1923901b74d9398dfb5c1def35419ba44b47103f1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-filter-bar-annotations/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1780061080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on the filter bar, see Filter Bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/smart-filter-bar-annotations/media_1f63b19fc27e7fb036d9982d3d1078ea9c0195d46.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/time-picker/media_1a3299eec348317d43996da8f6e55bd77ba251a0e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/color-palette-popover/media_1aa01dcaf13629eb1c936882f39c1c8acb6ce48e9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/title/media_1433797ff15029fd0dc9d1f7b57bc28f2da39a0d9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are three switch types: basic, semantic, and with optional text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/switch/media_1c4cad438673e7e8c95747f46022eec2e0114524d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061083,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter or ...","intro-desc":"Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter or the space bar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/button/media_19291fa0154186f0a5f94bc374864625f7330b8c8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061082,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061082,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061083,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/lightbox/media_1df666ea8b5317e9bebf4f0ec10ab62105c75304c.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061083,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/color-picker-popover/media_178cd15e3f34c66357ac9c94f756378f37ff268aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/visual-filter-bar/media_18aca500d03f7c65b77c3d319cb939cffd19390a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061083,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"The step input control allows the user to change the input values in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/step-input/media_170ea2399ca72fea7619733c3aaa853ce9e5e467d.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/message-box/media_1eb7ccea27832ec001d89efd99d7d0f849811fe6f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/smart-link/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1780061084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines, see Link and Popover.","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/smart-link/media_1a113de8c8491903a59aaf474142161da6f1137a7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/label/media_13ce5985e73ed0f5dbd70b09452e059195081321f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/table-select-dialog/media_165050dc5be72214c1d213943697ea35f0869f111.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/breadcrumb/media_1f70f4e597867960203d13b1bf92a71682c143341.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061086,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table and has a transparent background. The control is used for key actions that impact the entire table.","intro-desc":"The table toolbar always appears above the table and has a transparent background. The control is used for key actions that impact the entire table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/table-bar/media_1b24a8a909be38edc8f393277d41bd30bc577b377.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061086,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061087,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/rich-text-editor/media_1e719db17b4f7ca7c493758d62d94720892a2ca28.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061087,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the previous and next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/calendar-date-interval/media_178563ac253bd90837737ed18517e54e6a77c94cb.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061087,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/rating-indicator/media_1aa8dd51d3afe7d3b372ea779be430485b1ed97a6.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061088,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","intro-desc":"A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/range-slider/media_1df2d012de08cd975e0a68e3836d29022b6f585e6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1780061087,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/resources/user-research","title":"user-research","version":"","breadcrumbs":"","lastModified":1780064668,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/resources","title":"resources","version":"","breadcrumbs":"","lastModified":1780064668,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/resources/user-research/how-to-present-your-sap-fiori-app","title":"How to Showcase Your SAP Fiori App","version":"","breadcrumbs":"Resources / User Research / How to Showcase Your SAP Fiori App","lastModified":1780064670,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images ...","intro-desc":"Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/resources/user-research/media_1557aaaee66e120111fbbc1aed777b3eb651cdf83.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/resources/downloads","title":"SAP Fiori Design Stencils","version":"","breadcrumbs":"Resources / UI Kits / SAP Fiori Design Stencils","lastModified":1780064671,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/resources/media_1ad37a2eec4ae4842a7786ba19bae72db2ab937fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"Foundations / Visual / Motion Design","lastModified":1780065105,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time ...","intro-desc":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time dimension that makes it an ideal medium for storytelling. In the context of SAP Fiori, motion design and microinteractions work together to provide our users with a coherent user experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/media_1230d6860718a30d55332a0335e98ff4b7ec5728b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations","lastModified":1780065105,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different application themes and how they support accessibility standards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/iconography/icons","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography","lastModified":1780065106,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored ...","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted, hand-hinted, and aligned in font format. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/iconography/media_11d9d449f052b4f87fbbb2871ec6f63b4a6e3e76c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-84/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1780065105,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-84/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/product-standards/ux-consistency","title":"UX Consistency","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / UX Consistency","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design reduces cognitive load and ensures a cohesive, intuitive user experience across all products.","intro-desc":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148","title":"v1-148 current version","version":"","breadcrumbs":"","lastModified":1784190470,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/get-started/web-components-overview","title":"SAP Web Components","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The component guidelines for SAP Web Components and SAPUI5 are being merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/get-started/media_1fe63deac4ec22a90fa9acf174e18a5bf4bdd812a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/table-types-sap-fiori-elements","title":"Table Types","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the different table types","intro-desc":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/list-sap-fiori-elements","title":"List (SAP Fiori Elements)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / List","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements template helps enable the display of a list in the list report","intro-desc":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/get-started/ui-elements-sap-design-system","title":"UI Elements in the SAP Design System","version":"","breadcrumbs":"Discover / Get Started / UI Elements in the SAP Design System","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori UI elements and how they are documented.","intro-desc":"This page explains what “UI elements” are in the SAP Design System for web, introduces our key implementation technologies – SAPUI5 and SAP Web Components – and describes how guidance for these technologies is presented in the component guidelines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s design-led development process uses proven design thinking to ensure consistent, user-focused experiences across all applications and devices.","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/media_1ec9991d1adc6d26c349fbdfe17a171c1c93dc1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/object-page-footer-bar-sap-fiori-elements","title":"Object Page – Footer Bar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Footer Bar","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page footer","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/get-started","title":"Get Started","version":"","breadcrumbs":"Discover / Get Started","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here you’ll find everything you need to get started designing and building world class SAP apps that bring out the best in every business. The ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/media_1d2aa5e1079563183111d2f311518fae90aaf333a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Analysis Path Framework enables users to create interactive, chart-based analytical drilldown apps for exploring and investigating KPIs from multiple data sources.","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/analytical-frameworks/media_13c0a32cf660ff94271312170ee2634f9f375c3b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/object-page-overview-sap-fiori-elements","title":"Object Page – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Overview","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/media_1c7f8686593bb09b62b13d2f5fca6e76ae02177fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications","intro-desc":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/object-page-header-sap-fiori-elements","title":"Object Page – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Header","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/media_1648e6371a26398f6fbedc294b5e47e67b4599684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori delivers a consistent, intuitive, holistic, and simple user experience by creating visually appealing designs","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover","title":"Discover","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori aims to create intuitive, globally usable software for better usability and acceptance.","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/integration-of-classic-sap-uis-sap-fiori-elements-list-report","title":"Integration of Classic SAP UIs (SAP Fiori Elements List Report)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Integration of Classic SAP UIs (SAP Fiori Elements List Report)","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to navigate and integrate classic UIs for creating, displaying, and editing screens from a list report.","intro-desc":"This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some or all of these actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/media_137a3107e4949629e0dbac7627abd70d05f747730.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps provide a seamless, consistent experience across all devices, allowing users to work anywhere, anytime.","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/terminology-sap-fiori-elements","title":"Terminology for SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Terminology for SAP Fiori Elements","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements help you communicate better with the application developers","intro-desc":"To help you better communicate with application developers, this article presents development and design terms used in the context of SAP Fiori Elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-122","title":"What’s New in Guideline Version 1.122","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.122","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.122.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.122.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-142","title":"What’s New in Guideline Version 1.142","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.142","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.142.","intro-desc":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.142.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/list-report-content-area-fiori-elements","title":"List Report – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Content Area","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports simple content layout, multiple view layout, and multiple content layout","intro-desc":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/error-log","title":"error-log","version":"","breadcrumbs":"","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-139","title":"What’s New in Guideline Version 1.139","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.139","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.139.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.139.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/versioning","title":"Guideline Versions","version":"","breadcrumbs":"Discover / What’s New / SAP Fiori for Web - Guideline Versions","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find ...","intro-desc":"The SAP Design System portal now has a new simplified approach to past versions of the SAP Fiori for Web guidelines. You can still find all the information you need from any of the past guidelines you use, but the content has been condensed into versions for long-term support and a more streamlined user experience going forward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-124","title":"What’s New in Guideline Version 1.124","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.124","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.124.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.124.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new","title":"What’s New","version":"","breadcrumbs":"Discover / What’s New","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System guidelines are moving from experience.sap.com/fiori-design to its new domain at sap.com/design-system – don’t forget to bookmark your most used pages!","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/media_1e5358459744986ae3536869f07450e6780f99b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with our design principles, design-led development process, and multi-device approach.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only","title":"SAP S/4HANA Only","version":"","breadcrumbs":"","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/object-page-content-area-sap-fiori-elements","title":"Object Page – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Content Area","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page content area","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page/media_11fd078b8b3628d4618205383af52e7d4aa52da69.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/designing-sustainable-gen-ai-experiences","title":"Designing Sustainable Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Sustainable Generative AI Experiences","lastModified":1781346081,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page highlights the importance of ethical, responsible AI innovation and sustainability in product design, guided by SAP's AI Ethics Policy.","intro-desc":"Creating product experiences that all people love has always been our compass. As we integrate generative AI into the experiences we craft, we must stay focused on harnessing its potential for good. As these technologies grow ever more powerful, those of us who build with it have an important duty – to put ethics before profits or any other priorities. We all play a crucial role in advocating for responsible innovation. You should always refer to our SAP’s AI Ethics Policy Handbook to learn more about AI ethics and our risk framework.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1bbff00a72ac042d0f979ea708b3631c82a9638cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/explainable-ai-overview","title":"Explainable AI (XAI) – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI (XAI)","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To help users trust AI, it’s important to provide enough information about the model behind it and explain how and why it produces certain results.","intro-desc":"To help users trust AI, it’s important to provide enough information about the model behind it and explain how and why it produces certain results.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_160b8cb3cb9ca2b191b2483cc7d1d441e96b42178.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-130","title":"What’s New in Guideline Version 1.130","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.130","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.130.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.130.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/overview-in-a-situations-app","title":"Situation Handling - Overview in a Situations App","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Overview in a Situations App","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Situations app displays all situations in a user’s area of responsibility.","intro-desc":"The Situations app displays all situations in a user’s area of responsibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/media_1958721767ce48195c91982bbba32ffae3ead4544.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/table-rows-sap-fiori-elements-2","title":"Table Rows","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Rows","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/media_1948a2122825f177b562e760408c8a2a24ccbb7f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/smart-templates","title":"SAP Fiori Elements – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements – Overview","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI-development framework of choice for all projects, the SAP Fiori elements framework:","intro-desc":"The UI-development framework of choice for all projects, the SAP Fiori elements framework:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/media_1b0cd14a870b2c7ed05b87813f8ee717b45a23c70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/worklist-sap-fiori-elements","title":"Worklist","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Worklist","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings","intro-desc":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Intercultural UX – Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural UX – Environment","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Local factors like technology infrastructure, network connectivity, and power reliability must be considered in UX design to ensure a seamless user experience.","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design guidelines ensure consistency across products, with additional product-specific guidelines for tailored applications.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_12a7af32dcdde6d1dc193a9433388fe94cfb79fce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, it's important to consider their local meanings to ensure they enhance user experience and business processes.","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects","title":"intercultural-aspects","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intercultural UX design ensures usability and positive experiences by considering cultural and contextual differences in business environments.","intro-desc":"Culture, as we understand it, follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis of these webs is concerned with the ways people find meaning in the world.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/sap-s4hana-design-decisions","title":"SAP S/4HANA Design Decisions","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Design Decisions","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Contains all the design decisions for SAP S/4 HANA","intro-desc":"Contains design decisions for SAP S/4HANA. If needed, the respective guideline articles introduce the decisions with SAP S/4HANA Only.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/find-information-and-get-help","title":"Find Information and Get Help","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Find Information and Get, Help","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here, you will find selected information assets to help you:","intro-desc":"Here, you will find selected information assets to help you:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/media_164f2612f4ee06d52fb0f0706dd29206cb033b26b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/learning-journey","title":"Learning Journey","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Learning Journey","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A collection of learning resources for app designers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Cultural Differences in Needs and Behavior","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Cultural Differences in Needs and Behavior","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cultural factors like norms, beliefs, and technology trends influence how people work and interact, impacting design decisions.","intro-desc":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects may include socio-cultural norms and conditions; beliefs; attitudes to responsibility and taking the initiative; established practices; demographics; and trends in technology. They may also have an impact on design decisions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/object-page","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/replacing-placeholder-text","title":"Replacing Placeholder Text","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Replacing Placeholder Text","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for replacing the placeholder text","intro-desc":"Onscreen text and messages that are familiar to users in their business context simplify their work.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/ai-features/ai-input-assistance","title":"AI Input Assistance","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / AI Features","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI input assistance eases data entry for a new or existing object by recommending values for the input fields, based on previous input or business data.","intro-desc":"AI input assistance eases data entry for a new or existing object by recommending values for the input fields, based on previous input or business data. The intelligent suggestions are displayed as recommended values in the input fields for users to accept or to reject.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/ai-features/media_1281d3b8dc3fe49b96107778160bbda4d82ed62ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For the design options available with SAP Fiori elements framework and for AI features implemented with the framework, see the articles below.","intro-desc":"For the design options available with SAP Fiori elements framework and for AI features implemented with the framework, see the articles below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784263461,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility in SAP Fiori and SAPUI5 ensures inclusive design, with built-in features at the framework level and app-specific adjustments as needed.","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/table-features-sap-fiori-elements","title":"Table Features","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Features","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements templates support the features and settings for a table detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/media_12321c0a2f81188ad0c3cbe00f0709256c9e04ef2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Design-Led Development (DLD) process for S/4HANA and DSC enhances UX support, collaboration, and flexibility in design projects.","intro-desc":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_1ae5c2959796dec30e438debe112eb27b08d113ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-145","title":"What’s New in Guideline Version 1.145","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.145","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.145.","intro-desc":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.145.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/analytical-list-page-overview-page-sap-fiori-elements-2","title":"Analytical List Page / Overview Page","version":"","breadcrumbs":"","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.142.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/media_1eaa17eea275ca81091e4199d8ae05b8a7163d1d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/ai-features","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown enables the user to view and analyze the data of one key performance indicator.","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/sap-fiori","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System / SAP Design System","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System provides a consistent user experience for SAP software across platforms and devices.","intro-desc":"The SAP Design System is a design system that provides a consistent user experience for SAP software across platforms and devices. It’s at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/media_1ebc11fcd0b84ce6782c2d725b67b2ba175adb6bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling-guidelines","title":"Situation Handling – Guideline Overview","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA Only / Situation Handling – Guideline Overview","lastModified":1785328207,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling ensures smooth business operations by automatically notifying relevant users about critical issues, such as consumed contracts, delivery discrepancies, and impending deadlines.","intro-desc":"Situation Handling ensures smooth business operations by automatically notifying relevant users about critical issues, such as consumed contracts, delivery discrepancies, and impending deadlines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"default","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/foundation/ai-icon","title":"AI Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Icon","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI icon can be used alone, in buttons, or alongside labels or text to indicate content powered or generated by AI. The embedded AI ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/foundation/media_1e33cac0ef525d2a57692090d6fc280718eecf9cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/designing-agentic-ai-ecosystems-and-experiences","title":"Designing Agentic AI Ecosystems and Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Agentic AI Ecosystems","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"mailto:ellie.kemery@sap.com","intro-desc":"As our world grows increasingly interconnected and our technology becomes increasingly intelligent, the design of agentic systems that are capable of autonomous execution and decision-making presents consequential challenges and opportunities. We all bear a significant responsibility to place humans and ethics at the forefront of our technology processes to prioritize the needs, values, experiences of users and the greater society. By doing this, we can create agentic systems and experiences that not only enhance user experiences, but also foster user empowerment and principles of responsible AI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_19d669eac03fa6629295a23435365a134057ae655.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/navigation-menu","title":"Navigation Menu","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Navigation Menu","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The navigation menu is always a click away to provide users with quick access from one area of S/4HANA Cloud to another so they can work efficiently.","intro-desc":"The navigation menu is always a click away and provides users with quick access from one work area to another. To optimize their navigation flows, users can personalize the menu with their most used spaces and their favorite S/4HANA Public Cloud apps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_1e481f5c50b31ee9c5f6d35308ba5529b1a4d1a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/situation-detail-view","title":"Situation Handling - Situation Detail View","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Situation Detail View","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered ...","intro-desc":"The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered the situation.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/media_18ab85828b1b9d5101165d6ea401415b23af397d9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/situation-handling-controls","title":"Situation Handling - Controls","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling / Situation Handling Controls","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually: Initially, users ...","intro-desc":"Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually: Initially, users see the minimal display for a situation. They can seek additional levels of detail about it, according to their needs and goals.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/media_122fa8305bb7a1865512b64dcc67f175f05a449fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/best-practices-for-designing-sap-fiori-apps","title":"Best Practices for Designing SAP Fiori Apps","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Best Practices for Designing SAP Fiori Apps","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about the best practices for designing SAP Fiori Apps","intro-desc":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_1b27db6dd4b6c0eec3b05bd02699ba8e86b44bd1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/tables-toolbar","title":"Table Toolbar (SAP Fiori Elements)","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Toolbar","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/tables-and-lists/media_104a4cc90b3026bd75b11042940583fa5b5548916.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/ai-assisted-error-explanation","title":"AI-Assisted Error Explanation","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / AI-Assisted Error Explanation","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI-assisted error explanation helps users understand and resolve the errors and warnings that they encounter when working on an object page in an application developed with SAP Fiori Elements.","intro-desc":"AI-assisted error explanation helps users understand and resolve the errors or warnings that they encounter when working on an object page in an application developed with SAP Fiori Elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_1d4fd0e6f8ae46fe7f3cb2596fc4e510a9ba92199.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/system-information-bar","title":"System Information Bar","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / System Information Bar","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.","intro-desc":"With SAP S/4HANA Cloud, customers and partners receive a three-system landscape: a development system, a test system, and a production system.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_18b48e4c8f3df79437386c3df6f75f9e1b7fea017.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/designing-safety-into-gen-ai-experiences","title":"Designing Safety into Generative AI Experiences","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Safety into Generative AI Experiences","lastModified":1781346081,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines best practices for designing reliable, transparent, and robust generative AI systems, focusing on safety, explainability, and risk mitigation.","intro-desc":"AI safety is a big concern for a lot of people, and for good reasons. AI systems are becoming increasingly powerful, and if they’re not designed safely, they could pose a serious threat to humans and society.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations","title":"Foundations","version":"","breadcrumbs":"","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the guidelines to understand the basic AI design principles and what it takes to craft a good AI experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/foundation","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Foundation","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the AI color palette for embedded AI and Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-128","title":"What’s New in Guideline Version 1.128","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.128","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.128.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.128.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home","title":"My Home in SAP S/4HANA Cloud Public Edition","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / My Home in SAP S/4HANA Cloud Public Edition","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"My Home in SAP S/4HANA Cloud Public Edition offers enhanced personalization, access to tasks, situations, news, quick navigation, and analytical insights.","intro-desc":"My Home in SAP S/4HANA Cloud Public Edition is the entry point to apps, and offers access to:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_1aaa67640564d00a8664873fabc3937e9f116cea0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/building-trust-with-generative-ai","title":"Building Trust with Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Building Trust with Generative AI","lastModified":1781346081,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page discusses building trust in generative AI by ensuring transparency, user control, explainability, and fairness in SAP products.","intro-desc":"With all of the exciting advances being made in generative AI, there are also real ethical questions and concerns arising around things like accuracy, reliability, and the role that bias plays in what is being produced. As we start to imagine all the potential value that technologies like generative AI can bring to improving user experiences, customer outcomes, and more, it’s essential that we design and build trust into each and every interaction people have with our products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_110543980ca2999021760d547cd445162766a825e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/list-report-header-sap-fiori-elements","title":"List Report – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Header","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.","intro-desc":"The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products","title":"SAP Products","version":"","breadcrumbs":"","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/situation-handling","title":"Situation Handling","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Situation Handling","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Situation Handling helps businesses run smoothly by automatically informing the right users about the issues that require their attention, for example, consumed contracts, pending confirmations ...","intro-desc":"Situation Handling helps businesses run smoothly by automatically informing the right users about the issues that require their attention, for example, consumed contracts, pending confirmations and approvals, deviating deliveries, and upcoming deadlines.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling/media_173754a7d980d39caa18928049982bdeb292a1b57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/design-principles-for-generative-ai","title":"Design Principles for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Design Principles for Generative AI","lastModified":1781346081,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines SAP's generative AI design principles to ensure cohesive, high-quality experiences across all products.","intro-desc":"Generative AI can transform entire industries, and it’s already changing how we live and work. Its ability to generate novel content, whether text, image, data, or video, is a game changer. This technology is rapidly changing how we design, build and interact with software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_15dfc9c807154058f1158664ed9984d7a09553dc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/explainable-ai-principles","title":"Explainable AI (XAI) – Guiding Principles","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI / Guiding Principles","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page covers core principles and widely accepted best practices for explainable AI, or XAI. These concepts form the foundation for crafting your own explanations.","intro-desc":"This page covers core principles and widely accepted best practices for explainable AI, or XAI. These concepts form the foundation for crafting your own explanations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_142b6f03dff1adee6a7032c3bd83193eb4544c188.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/foundation/ai-colors","title":"AI Colors","version":"","breadcrumbs":"Foundations / AI and Joule Design / Foundation / AI Colors","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates the importance and association between UI elements and AI-powered features that enhance them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/foundation/media_1e42af22d41f3d2cb674e6e1ce86e9293e22bc193.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/explainable-ai-building-explanations","title":"Explainable AI (XAI) – Building Explanations","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Explainable AI / Building Explanations","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page explores how you can create local and global explanations for different progressive disclosure levels.","intro-desc":"This page explores how you can create local and global explanations for different progressive disclosure levels.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1cd4ce115b8d845572f13d0d9c09cc15ce734c279.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/get-started/ui-elements-overview","title":"UI Elements (SAPUI5)","version":"","breadcrumbs":"","lastModified":1781346079,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The component guidelines for SAP Web Components and SAPUI5 are being merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/get-started/media_159081a52050ba53a101c7e33dcd5628729bbb3c9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/situation-handling","title":"situation-handling","version":"","breadcrumbs":"","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-126","title":"What’s New in Guideline Version 1.126","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.126","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.126.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.126.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/ux-role-guidance","title":"Business Roles and Tasks","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Business Roles and Tasks","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides best practices for mapping business roles to SAP Fiori, including goal setting, task breakdown, and designing for different task types.","intro-desc":"This article outlines best practices for mapping a business role to SAP Fiori, including:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/sap-products/sap-s4hana-only/media_15808275cde40f6761de9acd29e01f749ec2859e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-136","title":"What’s New in Guideline Version 1.136","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.136","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.136.","intro-desc":"This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.136.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines","title":"AI and Joule Design – Guidelines","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Guidelines","lastModified":1781346080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Follow five guiding principles whenever you design generative AI features.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/discover/whats-new/whats-new-1-148","title":"What’s New in Guideline Version 1.148","version":"","breadcrumbs":"Discover / What’s New / What’s New in Guideline Version 1.148","lastModified":1781346081,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.145.","intro-desc":"This article provides an overview of the updates to the SAP Fiori for Web design guidelines with guideline version 1.148.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/discover/whats-new/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/tables","title":"tables","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/inner-source-process-for-sap-ai-experiences","title":"InnerSource Process for SAP AI Experiences","version":"","breadcrumbs":"","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-ranking","title":"Chart – Ranking","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Ranking","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/recommendations","title":"Recommendations","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/contact-sap-ai-design-team","title":"AI Design – Get in Touch with Us","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/important-links-on-ai","title":"Important Links on SAP AI","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI Design is moving fast. To make sure you catch the latest internal content, we’re moving content that may outdate between guideline releases to our ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/explainable-ai","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-types/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"[internal_only]","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/helpful-links-on-sap-ai-external","title":"Helpful Links on SAP AI","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/using-tooltips","title":"Using Tooltips","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Tooltips","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tooltips provide additional information, appearing near the pointer for unlabeled elements, varying by browser and platform.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_1dd38bfc64a884844c90532d7384523cda110c084.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/ai-design-quality-checklist","title":"AI Design Quality Checklist","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / AI Design Quality Checklist","lastModified":1781346098,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides an AI Design Quality Checklist with guiding questions and checkpoints to help design teams assess and improve SAP AI experiences.","intro-desc":"It is important to establish standards for the quality of SAP AI experiences. To get started, we are providing a first set of guiding questions and mandatory checkpoints to enable design teams to assess AI Design quality confidently and identify important follow-ups with technical experts. This AI Design Quality Checklist is also tied to the Design Intent Reviews and Design Excellence Reviews hosted by Chief Design Officer Arin Bhowmick.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-correlation","title":"Chart – Correlation","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Correlation","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.Scatter charts and bubble charts are the most frequently used charts to visualize a correlation, although using a line chart or bar chart side-by-side is also an acceptable solution.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/formatting-time","title":"Formatting Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Time","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains international time formatting rules and how to use SAPUI5 time formatters based on user locale settings.","intro-desc":"This article describes the international rules for time formats. The SAPUI5 time formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/media_108541462ce9e30919b7314c39a25f4645d7be76f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to ...","intro-desc":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1b74d3fb26dbffacc09590bbfe6bb3a6168fe6fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/matching","title":"Matching","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/formatting-numbers","title":"Formatting Numbers","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Numbers","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about international number formatting rules and when to use SAPUI5 number formatters based on user locale settings.","intro-desc":"This article describes the international rules for number formats. The SAPUI5 number formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe","title":"Charts","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts (VizFrame) – Foundations","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Find out how to use the qualitative, sequential, and semantic color palettes for chart visualization.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"default","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Gestures","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The following gestures are available in charts:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-distribution/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","intro-desc":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-distribution/media_11f2e64a2949ceeba1cfc58926884bd6f842d7fa5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/size-of-the-chartcontainer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/size-of-the-chartcontainer/media_111621734db3f0437d3160bbad0d25405e0a19f0e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-semantic-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","intro-desc":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-semantic-pattern/media_14c5e08af7a9c2a17d3a6598b6b1656b28b8eb732.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/how-to-use-semantic-colors","title":"Using Semantic and Industry-Specific Colors","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Using Semantic and Industry-Specific Colors","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use semantic colors and industry-specific colors to visualize the status or state of business data.","intro-desc":"You can use semantic colors and industry-specific colors to visualize the status or state of business data:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_1319c700fcb1f6fa576a4cce3d7477035e3ec7544.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-correlation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","intro-desc":"This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-correlation/media_140f3a02bd80901a0a9209a59f6ee876faa5f6e89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/featured/meet-ai-writing-assistant","title":"Meet AI Writing Assistant","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All relevant content is now incorporated in the page for the AI writing assistant pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/featured/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/gestures/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"The following gestures are available in charts:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Types","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/ai-design-glossary","title":"AI Design Glossary","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design Glossary","lastModified":1781346098,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To provide you with some quick help on AI terminology used in or referred to within our guidelines for ‘Designing Intelligent Systems’, you can find ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices","title":"Best Practices","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/pop-over","title":"Chart Popover","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Popover","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.By default, the chart popover:                     Displays dimension members and measure values fed into the chart that relate to the data point.                     Displays the number of selected items when in multiselection mode.                     Does not display related actions.                     The entire content of the popover can be changed or a related action can be added at the end.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/value-display/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"This article describes how value labels are displayed and how to customize them.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/value-display/media_1729761e20e611b7335fc1d69d9863c49a2478ff1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/collaboration","title":"Collaboration","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Collaboration","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Jam integrates with SAP Fiori to enhance collaboration through tiles, menu options, and group feeds, connecting teams with key information in the cloud.","intro-desc":"SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/joule-assistant/joule-icon","title":"Joule Icon","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule Assistant / Joule Icon","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Joule icon activates the conversational AI assistant and is also used for SAP marketing purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/joule-assistant/media_17860a9104529f9cdc154fdedcef4ab91212b2119.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/ai-design-system-faq","title":"AI Design System FAQ","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design System FAQ","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the answers to the most common AI design questions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-value-based-legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-value-based-legend/media_1e4763ff57f9b2e774d8f9c1ccd908f5d9e218b64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/units-of-measurement","title":"Units of Measurement","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Units of Measurement","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines rules for displaying units of measurement using long text instead of abbreviations, based on locale settings.","intro-desc":"This article describes the rules for units of measurement.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/media_1fe324e275df364181851d438a6e8b79bb00683a0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/ui-element-states","title":"UI Element States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / UI Element States","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the right UI element states helps users identify options and actions, including control, value, visual, and additional states.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_1380d05378bd5264023e6fc84e6076138ccf9a380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/formatting-dates","title":"Formatting Dates","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Dates","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers international date formatting rules and how to use SAPUI5 formatters based on user locale settings.","intro-desc":"This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-variation-through-time/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change ...","intro-desc":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-variation-through-time/media_10c3f21ac2b6a4c1fa00b955e41fbac8700461a86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-time-axis/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, ...","intro-desc":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-time-axis/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-ranking/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the ...","intro-desc":"This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-ranking/media_1e79394d27ee1033acbaa54a61c788ea32b4a4ce3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Distribution","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose an appropriate chart for visualizing how values are distributed within a set.For example: You want to visualize how the number of employees are distributed across different salary ranges, or you want to compare the distribution of salaries across different job levels.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/featured","title":"featured","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements","title":"Best Practices – UI Elements","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – UI Elements","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-semantic-pattern","title":"Chart – Semantic Patterns","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Semantic Patterns","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"","description":"This article explains how to use patterns like dashes, dots or hatches in order to distinguish:                     Actual Values: What values are (solid pattern).                     Projected Values: What values might be (dashed line, hatched areas).                     Reference Values: What values should be (dotted line with empty circles, empty areas).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-numbers-dates-format","title":"Chart – Number and Time Format","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Number and Time Format","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:                     SAPUI5 number formatters                     SAPUI5 date formatters                     SAPUI5 time formatters","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/color-palettes/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.","intro-desc":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/color-palettes/media_1656c66dd3f07b84c128115b113b0934701e82ac2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/feedback-loop-in-intelligent-systems","title":"User Feedback","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview","title":"AI and Joule Design – Overview","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI and Joule Design – Overview","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about SAP's generative AI strategy, our approach to developing guidelines, and the foundation guidelines you'll need to get started.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/pop-over/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A chart popover is used to display information or an action related to the selected data points of a chart.","intro-desc":"A chart popover is used to display information or an action related to the selected data points of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/pop-over/media_1f4435945d3dc5f915f2d8e10bf14e9b0546b54be.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/reference-lines","title":"Chart – Reference Lines","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Reference Lines","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions ...","intro-desc":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/selection/media_188fc7a9855f9e6def451d159186c534e10e3e1f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/colors-for-primary-bar-only","title":"Bullet Chart – Color Use for Primary Values","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Bullet Chart – Color Use for Primary Values","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/ai-design-contact-us","title":"AI Design – Contact Us","version":"","breadcrumbs":"Foundations / AI and Joule Design / AI Design – Contact Us","lastModified":1781346098,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to give feedback, get support, and collaborate with the AI Design team.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_1fe63deac4ec22a90fa9acf174e18a5bf4bdd812a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/values-and-names/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color token names that are intended for use in all SAP chart palettes.","intro-desc":"This page provides all the color token names that are intended for use in all SAP chart palettes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/values-and-names/media_1d59fa6cde6977dc554a7009bb6106a11a999c66a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/range-selector/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives ...","intro-desc":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/range-selector/media_1731b780d42d8a9101799e2a3b477059481afda33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/featured/meet-regenerate","title":"Meet the Regenerate Pattern","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All relevant content is now incorporated in the page for the regenerate pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/featured/media_1ffc42d17f9ec0828fb13de32b29ef9ad7f157e2a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type","title":"Choosing the Correct Chart Type","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Charts are used to visually represent how numeric values relate to each other. Therefore, it’s crucial to define the type of relationship you want to illustrate when choosing the correct chart type.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/embedding","title":"Chart – Embedding","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Embedding","lastModified":1784931207,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/ai-design-roadmap","title":"AI Design Roadmap","version":"","breadcrumbs":"","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-comparison/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular ...","intro-desc":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-comparison/media_1317d408c6e8a2f0529139aa4a011a2f634dbbd06.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/reference-lines/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","intro-desc":"You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/reference-lines/media_1d2172fd0f6cb798bacfb5fcd45cca1e5754b42d6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/ranking","title":"Ranking","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content of this page is no longer aligned with SAP’s latest AI design guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/designing-intelligent-systems","title":"Designing Intelligent Systems","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As the AI design system evolves, this page no longer reflects the latest developments.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/joule","title":"Joule","version":"","breadcrumbs":"Foundations / AI and Joule Design / Joule","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the icon for SAP's conversational AI panel.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/colors-for-primary-bar-only/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/colors-for-primary-bar-only/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-deviation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two ...","intro-desc":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-deviation/media_1fb40387eff29f19b08c93690be2b0e54b1294a5f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/tables/table-overview","title":"Table Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Overview","lastModified":1781346098,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree","elementstatus":"Live","description":"Efficiently display and interact with data using responsive and desktop-centric table controls for various complexities.","intro-desc":"A table contains a set of line items, each displayed as a row that’s divided into columns. Line items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or triggering actions relating to the line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/tables/media_107217f2f7767be3a21c2af8878d32a1590596cbf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting","title":"formatting","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-numbers-dates-format/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","intro-desc":"All numbers and time information must comply with the user’s locale settings. For this purpose, you must use the following:","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/scrolling-direction-of-a-chart","title":"Scrolling Direction of a Chart","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Scrolling Direction of a Chart","lastModified":1784931207,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-deviation","title":"Chart – Deviation","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Deviation","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers. The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category. All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/values-and-names","title":"Chart Color Palettes – Values and Names","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Color Palettes – Values and Names","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page provides all the color token names that are intended for use in all SAP chart palettes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-part-to-whole/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","intro-desc":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-part-to-whole/media_12648d45de197bf6cadb9d84dbb6cb83a9d14e0e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/legend/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"The legend explains the meaning of all the visual elements contained in the plot area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/legend/media_1d4d66e014cd8ef7a5674059b2c06e03f25752ab0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/busy-handling","title":"Handling Busy States","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Handling Busy States","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to manage busy states in SAP Fiori apps using local and global indicators to inform users during ongoing processes.","intro-desc":"This article describes how to handle the busy state in SAP Fiori apps in general. You can set a busy indicator locally at control level (for example, on a page or for a button) using a busy state, or set it globally using the busy dialog. In SAP Fiori, the aim is to keep the blocking of UIs to a minimum, and to unblock areas where user interaction is possible. Because response time depends on available bandwidth and server performance, unblocking can take a second or more. In this case, we need to inform the user that the process is ongoing.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_16f99fa6efcbe276c93111f8e44bafa685a0292cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/color-palettes","title":"Chart Color Palettes","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Color Palettes","lastModified":1784931207,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","description":"SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.This article explains what the three color palettes are designed to do and how you can leverage their unique properties.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_146119eef57d509acecebda9fa5ff3d79c21a8168.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/size-of-the-chartcontainer","title":"Size of the Chart Container","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Size of the Chart Container","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/zoom/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of ...","intro-desc":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/zoom/media_1b4ef8c75b9aec7af5ed658391669db9121165a01.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/joule-assistant","title":"joule-assistant","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Value Display","lastModified":1784931207,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how value labels are displayed and how to customize them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-part-to-whole","title":"Chart – Part to Whole","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Part to Whole","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/title-hierarchy-guidance","title":"Title Hierarchy Guidance","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Title Hierarchy Guidance","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes how the efficient heading structure not only enhances visual hierarchy but also significantly improves accessibility for users.","intro-desc":"When designing and building web apps, organizing and managing headings is very important. A clear and consistent heading hierarchy, expressed visually through title styles and structurally through semantic heading levels, helps users scan and understand pages quickly while also supporting efficient navigation for assistive technologies. By establishing clear guidelines for using title styles alongside appropriate semantic heading levels, teams can create layouts that are intuitive, adaptable to different interactions and states, and easy to navigate.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_1691b6c1c1983b270ac1dc7abf0ef4fab7caab475.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Range Selector","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-comparison","title":"Chart – Comparison","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Comparison","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order. This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks. If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation Over Time page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/chart-variation-through-time","title":"Chart – Variation Over Time","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Choosing the Correct Chart Type / Variation Over Time","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods. Time Category and Time Axis By convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations. We recommend using the time axis which has three main advantages:   It allows you to display dates and times in a responsive manner.  All the complexity involved with formatting the axis labels is automatically taken care of.  The physical spacing between the data points accurately respects the time scale, as opposed to just displaying them equidistantly.  Additional Categories In addition to the time category, there are additional categories that contain an intrinsic order and that that carry the notion of progression or trend. For example, age, time period, or a rating. As such, the rest of this article also applies to these categories. Column or Line Chart?   Use a line chart if you want to emphasise the trend over time. Use a column chart if you want to emphasise the values themselves.  In the figure below, you can see that the trend of the values immediately stands out in the line chart, while we need to make an effort to visualize the trend of the values in the column chart. At the same time, the values can be compared more easily in the column chart.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/choose-the-correct-chart-type/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/scrolling-direction-of-a-chart/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the guidelines for embedding charts in SAP Fiori apps, which includes scrolling behavior.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/scrolling-direction-of-a-chart/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-time-axis","title":"Chart – Time Axis","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Time Axis","lastModified":1784931207,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","description":"The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Zoom","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can change the scale of an axis on a chart by using the zoom function. This function spreads or shrinks the scale of the horizontal or vertical axis. Both the categorical and continuous axes can be zoomed.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/formatting-data-overview","title":"Formatting Data – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Formatting Data – Overview","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers SAP Fiori's data formatting rules for dates, time, numbers, and units to ensure consistency across different locales and seamless workflows.","intro-desc":"SAP Fiori applications are often used in an international context, and therefore need to be designed to adapt to different locales. Consistent rules for data formatting and characteristic data styles make the apps easy to work with, while enabling users to solve seamless workflows with cross-border processes and communication.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/media_143c3d59a3af0277e02474689b8ee6392d37edd80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/which-selection-control-to-use","title":"Which Selection Control Should I Use?","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Which Selection Control Should I Use?","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Selection controls are UI elements that enable users to choose one or more options, with various types designed for specific use cases.","intro-desc":"Selection controls are UI elements that allow the user to pick one or several values or options. Different selection controls are available, which each support dedicated use cases. This article offers guidance on when to use the following selection controls:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_1fbf5806ea6a90aa61abe81230bd18da77eedbf54.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/selection","title":"Chart – Selection","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Selection","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/embedding/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling ...","intro-desc":"This article explains how to embed an SAP Fiori chart in an app in such a way that it has the correct size and scrolling behavior.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/embedding/media_1daaa2d3d3e7ee9067a9c8ba8e7cdfd760cf4bb15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/leading-trailing-blank-removal","title":"Removing Leading and Trailing White Space","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Formatting / Removing Leading and Trailing White Space","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to manage and trim leading white spaces when copying and pasting text into input controls to prevent processing issues.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/formatting/media_1c3891164147b26d35d90c36cd06324f775f90cf3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/generative-ai-design","title":"Designing for Generative AI","version":"","breadcrumbs":"Foundations / AI and Joule Design / Overview / Designing for Generative AI","lastModified":1781346098,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP's generative AI strategy, including guidelines, best practices, and how to contribute to the design of business applications.","intro-desc":"Generative AI is the talk of the town. But what does it mean for the design of business applications? With this article, we want to give you an overview of where SAP’s generative AI strategy stands today, our approach to developing guidelines, patterns, and best practices and how everyone can contribute.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/overview/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/joule-assistant/joule-experience-primer","title":"Joule Experience Primer","version":"","breadcrumbs":"","lastModified":1781346098,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This early Joule overview is no longer up to date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/joule-assistant/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/date-and-time-pickers-overview","title":"Date and Time Pickers – Overview","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Date and Time Pickers – Overview","lastModified":1781346099,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Date and time pickers are UI components for selecting, entering, and reviewing dates, time values, and ranges.","intro-desc":"Date and time pickers enable users to select, enter, and review dates and times. They support both structured input and interactive selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/media_1ae468179dd468a5bfccde93b3b67ff378043e23c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/effective-ai-prompts","title":"Designing Effective AI Prompts","version":"","breadcrumbs":"Foundations / AI and Joule Design / Guidelines / Designing Effective AI Prompts","lastModified":1781346098,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline covers best practices for designing effective generative AI prompts, including principles, patterns, and tips for optimizing user input and results.","intro-desc":"In the context of generative AI experiences, a prompt refers to the instruction given by a user to guide the output of a generative AI model.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/ai-and-joule-design/guidelines/media_1a4bd171b358cf8337c61385170a58f2e03a5b349.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/legend","title":"Chart – Legend","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Legend","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The legend explains the meaning of all the visual elements contained in the plot area.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1781346098,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization allows users to modify column visibility, order, sorting, grouping, and filtering for both simple and complex tables.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/tables/media_148972a96b93f46542626688003fc01290f86c781.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/chart-value-based-legend","title":"Chart – Value-Based Legend","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Value-Based Legend","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","description":"The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/charts-vizframe/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"SAP Fiori Launchpad – Merged Header","version":"","breadcrumbs":"","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/states","title":"states","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Forwarding items is now handled by a Forward action in the Share menu of the header toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-my-home","title":"SAP Fiori Launchpad “My Home”","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad “My Home”","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The \"My Home\" space in SAP Fiori launchpad provides a personalized entry point with role-based app tiles, allowing users to add, remove, and group apps on both mobile and desktop devices.","intro-desc":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_153f77eff06072cef783df71456d92d13520fa096.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad hosts apps, offering navigation, personalization, and role-based access on mobile and desktop devices.","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Object Handling – Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Create with Reference","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about using the create with reference pattern for creating a new object and referencing it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_18613303bfe2a1150661fb1e7e7277403519fcba6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/move","title":"Drag and Drop – Move","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Move","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Drag and drop is an intuitive interaction for moving an element from one position to another.","intro-desc":"Drag and drop is an intuitive interaction for moving an element from one position to another. In some cases, the draggable element is used as a content container and its position then has no business significance. In other cases, the draggable element represents a business object or value, and moving it changes that value.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/media_1643c188053da9dca8b5fbd5814b1eeb11a8df851.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772 and Sunset of the SAP Fiori Client.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Launchpad provides an enterprise search to quickly find apps and business objects like materials, customers, and maintenance plans.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_1c99516cb73d573ee3cd8b163bcfac119b8bf85a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/delete-objects","title":"Object Handling – Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Delete","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Objects can be deleted from a list or object page, with a confirmation dialog to prevent accidental deletion, unless specified otherwise.","intro-desc":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the items depends on the structure of the object (simple or complex).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_1420ac552e13b7b375167d6c0dc74f30370306117.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Complex Objects – Global Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Global Flow (Create, Edit)","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the global flow for creating and editing items, where only the main page needs to be saved, unlike the local flow.","intro-desc":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_107badff44f210450a3174b27162b1185cbeb4ef7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual","title":"Visual","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/states/interaction-foundations-value-states","title":"Value States","version":"","breadcrumbs":"Foundations / Interaction / States / Value States","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value ...","intro-desc":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/states/media_16d2d5a627af8f1914830df888979ec0f220c5057.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/states/interaction-foundations-component-states","title":"Component States","version":"","breadcrumbs":"Foundations / Interaction / States / Component States","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The component state controls its interactivity and visibility, with only one state active at a time.","intro-desc":"The component state determines the interactivity and the visibility of the component. A component can have only one component state at any given time. The following component states are available: enabled, disabled, read-only, and hidden.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/states/media_151c2b93f016ec87072ac607b17230f6f99ea9285.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop-overview","title":"Drag and Drop – Overview","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop – Overview","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Drag and Drop is an intuitive interaction, which allows users to reorder, resize, move or transfer elements by dragging them from one location and dropping them to another.","intro-desc":"Drag and drop is a simple and intuitive interaction that lets users to reorder, resize, and move elements or transfer data while getting real time visual feedback. It is used in many contexts, each with specific needs and requirements depending on the use case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_1d2914f3017fd3cb4c9c60e3f5074543c1c31e081.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/keyboard-support","title":"Keyboard Support","version":"","breadcrumbs":"Foundations / Interaction / Keyboard Support","lastModified":1781346126,"designowner":"Core Design Web","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Overview of what is necessary to make a UI component accessible to keyboards.","intro-desc":"Every application and UI component must be fully operable using the keyboard.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_1f288821a6ad1a847ea132af6133ddb6f615beed7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to create icons for web apps in a third-party marketplace.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/overview","title":"Interaction Design Foundations - Overview","version":"","breadcrumbs":"Foundations / Interaction / Interaction Design Foundations - Overview","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interaction design foundations summarize all aspects of how the user interface should behave when interacting with it to accomplish a certain task and a corresponding goal.","intro-desc":"The interaction design foundations define how the user interface should behave when users interact with it to complete specific tasks and achieve their goals. Interaction occurs through input devices such as a mouse, keyboard, gestures, or voice commands, and output devices like screens or screen readers.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_1da1f012a47734798bbe6df63618b4509f66b5d83.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/reorder","title":"Drag and Drop – Reorder","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Reorder","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Reordering enables users to dynamically adjust the order of items by dragging an item and dropping it into a new position.","intro-desc":"Elements can be reordered by dragging them to a new position within a defined list or grid. Reordering changes the placement of elements relative to other items and requires a specific drop target to finalize the new order of the item set.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/media_1dc19d32261b4e99023a1dc36cfc32afd87b41db2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/gestures","title":"Gestures","version":"","breadcrumbs":"Foundations / Interaction / Gestures","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Touch gestures are key for interacting with mobile and touch-enabled web environments, allowing navigation and manipulation via natural hand movements.","intro-desc":"Gestures are touch-based interactions that let users navigate, manipulate, and engage with digital interfaces using natural hand movements. They're essential in mobile and touch-enabled environments, where you don't have traditional input methods like a mouse or keyboard. Each gesture – like swipe, tap, double tap, long press, or rotate – conveys a specific intent and triggers context-aware responses from the interface.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_19edbf13926038e2b420deeefaf57eb8e8086a267.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/states/interaction-foundations-state-combinations","title":"State Combinations","version":"","breadcrumbs":"Foundations / Interaction / States / State Combinations","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Some of the states like selection state, value state, and interaction state can be used together.","intro-desc":"Some of the states can be used together with other states.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/states/media_15cb5e98246a386793f8b76da8bac986a3a3f31c3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/shadow-concept","title":"Shadow Concept","version":"","breadcrumbs":"Foundations / Visual / Shadow Concept","lastModified":1781346127,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Shadow levels indicate the visual layering hierarchy of container controls in the UI.","intro-desc":"The shadow concept offers a standard way to show depth in applications. It defines several depth levels that apply to all container components, such as tiles, menus, dialogs, and other elements. Each depth level uses a unique shadow, so you can easily distinguish one layer from another. This helps create a consistent visual hierarchy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_14dbb64f65f6354761925c467e140d6f04bec2714.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/colors/morning-horizon","title":"Morning Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Morning Horizon Colors","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. ...","intro-desc":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/colors/media_1a3f13591278075c4a8d5b2dcddd2db222eb28b65.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/ai-notice-base-concept","title":"AI Notice Base Concept","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / AI Notice Base Concept","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Outlines UX and UI design methods that ensure that users are aware when interacting with AI-generated or AI-edited information.","intro-desc":"This guideline outlines UX and UI design methods that ensure users are clearly aware when interacting with AI-generated or AI-edited information. In accordance with the SAP Global AI Ethics Policy, transparency is crucial for building trust in AI-enhanced products, and the AI notice concept plays a key role in achieving this transparency.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/media_15c7e662d18e9923836bbf46fbb66ae41f68298cd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/states/interaction-foundations-interaction-states","title":"Interaction States","version":"","breadcrumbs":"Foundations / Interaction / States / Interaction States","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Interaction states are managed by the component, with only one state active at a time.","intro-desc":"Interaction states are handled by the corresponding component directly. A component can have only one interaction state at any given time. The following interaction states are available: regular, hover, and down.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/states/media_19ec9031e8b6107af8f81b01305610f9e33712950.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been revised and moved to the Interaction Foundations section of the guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/animation","title":"Animation","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been replaced by a new page on motion design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/data-transfer","title":"Drag and Drop – Data Transfer","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Data Transfer","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"<Short Description>","intro-desc":"The drag and drop interaction can occur between components within an application or across different applications. This means users can transfer data from a source component to a target component, which may involve transforming the data format or data uploading if the transfer is across applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/media_1f1bc0128b250dd4f12379fa465795df5661c14fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page outlines guidelines for overview page texts, including titles, subtitles, and actions.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder in SAP Fiori launchpad lets users browse and launch SAP Fiori, SAP GUI, and Web Dynpro ABAP apps from one place.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_13ba1291ffd940838846eceac47655f24ccc9df23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/iconography/icons","title":"Iconography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Quartz","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons feature a friendly, elegant design with consistent size and balance, optimized for simple, scalable user interaction.","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/iconography/media_11d9d449f052b4f87fbbb2871ec6f63b4a6e3e76c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/typography/typography-horizon","title":"Typography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Horizon","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s proprietary 72 typeface is designed for legibility, robust hierarchy, brand voice, language support, and accessibility in SAP Fiori applications.","intro-desc":"SAP applications use SAP’s proprietary typeface 72, with a fallback to sans-serif system fonts if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop","title":"drag-and-drop","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/interaction-foundations-value-states","title":"Value States","version":"","breadcrumbs":"Foundations / Interaction / States / Value States","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value ...","intro-desc":"Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_10e851a8c8f40f08eebacbf1c12e300572e4cecee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori adjusts content density for optimal component sizes, supporting both touch and mouse or keyboard interactions on any device.","intro-desc":"SAP Fiori is responsive and works on all devices and form factors. You need to support all common interaction styles in the same way. This includes interaction with a mouse and keyboard as well as touch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_181991c8bd8f95f41457f4f175f559c5b8c3f9bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/copy","title":"Object Handling – Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Copy","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_19c2b382122892c2af0945dd02aeb09a4cc5f41a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1781346125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps can leverage native mobile features like camera, GPS, and accelerometer for ensuring consistency.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/iconography/iconography-horizon","title":"Iconography – Horizon","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography – Horizon","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons for the Horizon themes feature a bold, consistent design with easy-to-understand metaphors, optimized for scalable use in SAP applications.","intro-desc":"The SAP icons for the Horizon visual themes feature a fresh, friendly, and bold aesthetic. They are designed for consistency in size, stroke, and balance. As a core element of the SAP visual product identity, these icons are optimized for simple and direct user interaction through intuitive, easy-to-understand metaphors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/iconography/media_183d1c951c22262f154c9be5f72dc95924ca8414e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/timing","title":"Timing","version":"","breadcrumbs":"Foundations / Timing","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Timing refers to how long it takes for a component to appear or disappear from the screen, as well as any intentional delay between user input and system response.","intro-desc":"Timing refers to how long a component appears or disappears on screen, as well as any intentional delay between user input and the system response. The speed should be slow enough for users to notice changes, but fast enough to avoid unnecessary waiting.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_160b1b3a19586472ca52b4b5d7581edaf71b2c1ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1781346125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Object Handling – Partial Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Partial Edit","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Object handling interaction flow is used to edit specific sections or items of an object.","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_151176540ca66a2118dae22b47e68ef45b94f4f55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/navigation","title":"navigation","version":"","breadcrumbs":"","lastModified":1781346125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction","title":"Interaction","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses a hub-and-spoke navigation model, with a central home page and easy back navigation to provide seamless user flow across apps.","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/navigation/media_1e93ccccc2b283d2a243d359a6999c48eb4e66169.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/messaging","title":"messaging","version":"","breadcrumbs":"","lastModified":1781346125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services","title":"Integration and Services","version":"","breadcrumbs":"","lastModified":1781346125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling","title":"object-handling","version":"","breadcrumbs":"","lastModified":1781346125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1781346127,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is a temporary version of a business entity that saves unsaved changes, prevents data loss, and allows editing resumption until saved as the active version.","intro-desc":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_14824efef9dca768e282b67d962819d953809c925.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Complex Objects – Local Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Local Flow (Create, Edit)","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the local flow for creating and editing items with standard and draft handling, where each subpage is saved separately.","intro-desc":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_1c8c74db63ff7c7cbca5347151b48e2aadd70407e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/interaction-design-foundations-states","title":"States - Overview","version":"","breadcrumbs":"Foundations / Interaction / States - Overview","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take ...","intro-desc":"Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_12ec8ae5bfcdb32f5fee0a519fcadd19ed78276ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/states/interaction-foundations-selection-states","title":"Selection States","version":"","breadcrumbs":"Foundations / Interaction / States / Selection States","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The selection state highlights the selected element, making it clearly distinguishable from others.","intro-desc":"The selection state is applied after the user has selected the element. The selected element should be clearly distinguishable from the other elements. The following selection states variants are available: selected, unselected, and indeterminate.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/states/media_1606cb341590fa042ec735a5ede2b8918f86ecf3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/designing-for-empty-states","title":"Empty States","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Empty States","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers empty states in apps, explaining their purpose, design recommendations, and how to enhance user experience with clear guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/media_19f4505aa19fac28906348de6d2119371f56c59e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Simple Objects (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Simple Objects (Create, Edit)","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about flows to create and edit simple objects, with all information on one page and standard message and draft handling.","intro-desc":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_1a1cc118fe7262666a86d6ce90117d257b1581cc7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1781346126,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates importance and association while providing direction to users.","intro-desc":"Color brings your screens to life. It communicates importance and association, letting users quickly identify key elements. When you use the theme’s color palette, you help create a clean, lightweight design that stays consistent and coherent across all SAP Fiori applications. Thoughtful use of color enhances visual hierarchy, usability, and accessibility. Colors also reinforce consistency and help users recognize status or visual feedback.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_177f1d34328b976c544a3e6b636ebd3d93917a9d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/motion-design-overview","title":"Motion Design – Overview","version":"","breadcrumbs":"Foundations / Interaction / Motion Design","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design uses animation to enhance user interactions and experiences. It makes SAP software interfaces intuitive, user-friendly, and modern.","intro-desc":"Motion design uses animated visual elements to support interactions, communicate intent, and create a more engaging user experience. You can use it in SAP software to make interfaces feel intuitive, user-friendly, and modern.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_14d67ad623fe9273e629e26ac71361f0daeb4816e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori Launchpad services include features like Recent Activities, App Finder, Settings, and more for enhanced user experience.","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_130348e70d783a65fed4991372085a7fd06ba1142.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling – Overview","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Overview","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori message types and how to use them effectively in messaging scenarios.","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/messaging/media_139884682f4371430549515bb250c4886df56dc47.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/resize","title":"Drag and Drop – Resize","version":"","breadcrumbs":"Foundations / Interaction / Drag and Drop / Drag and Drop – Resize","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Resizing allows users to dynamically adjust the size of an element by dragging its edge and dropping it at the desired size.","intro-desc":"Elements, components, or containers can be resized in one or two dimensions – or both – depending on the interaction design. Unlike reordering, which requires a specific drop target, resizing is based on the final pointer position to determine the new size.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/drag-and-drop/media_16d6ef915cadb703869fbedd178d9d6833c7b141e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/mass-editing","title":"Object Handling – Mass Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Mass Edit","lastModified":1781346127,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Mass editing lets users simultaneously update multiple objects with shared editable properties.","intro-desc":"Mass editing allows users to simultaneously change multiple objects that share the same editable properties.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_186fa93495d3f4146973df58742e7efe8995daee0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-spaces","title":"SAP Fiori Launchpad Spaces","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Spaces","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad spaces allow users to switch between spaces and the home page, organizing role-specific apps with tiles for quick access to relevant business tasks and content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_16f72ac0248bab2c56af202e3d0551b6e21b6d631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/design-tokens","title":"Design Tokens","version":"","breadcrumbs":"Foundations / Visual / Design Tokens","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and ...","intro-desc":"SAP offers design tokens for color, typography, shadow, and metrics in a central repository. The central design token styles can be used in Figma and are linked directly to the SAP base theming content implementation that is used for all products to adopt the SAP standard and accessibility themes across all SAP technologies and platforms. Using design tokens instead of hard-coded values can streamline the work of building, maintaining, and scaling products with a design system.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_19f44ec8c49dbcb36970036ed3b9aae7d422ed116.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations - Overview","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations - Overview","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section offers consistent use of design elements like colors, typography, and icons ensures strong branding, following guidelines on design tokens, and theming.","intro-desc":"Visual design plays a key role in how users perceive and recognize a product. Applying consistent styles reinforces brand identity and helps users feel confident as they interact with your application. Explore the sections below to get an overview of each visual design area and find links to detailed guidance:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_15dc136939bdb3eb73c26f981180d7a1a4b3c9d35.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/cursors","title":"Cursors","version":"","breadcrumbs":"Foundations / Interaction / Cursors","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cursors are graphical elements that show the current position within the software interface.","intro-desc":"Cursors are visual indicators that show where user interaction is currently focused on the screen. Users can move the cursor and interact with elements on the screen using a mouse, touchpad, or keyboard.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_19f56a748c4e9dfc1a149bce79f684326c2cdd247.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/states/interaction-foundations-focus-states","title":"Focus States","version":"","breadcrumbs":"Foundations / Interaction / States / Focus States","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Focus states determine which component receives input when no positioning is provided, primarily aiding keyboard users.","intro-desc":"Focus states determine which component receives the user’s input when the input doesn’t supply positioning information. The focus state is most important for keyboard users. The following focus states are available: focused and unfocused.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/states/media_1d3d4e285d3d03675d5ff5bfc0f5317b07c3f9bd8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/colors/evening-horizon","title":"Evening Horizon Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Evening Horizon Colors","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Evening Horizon is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/colors/media_1b96154f01f35e4caeba1e1066a19f50f52baa5ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/iconography/product-launch-icons","title":"Product Launch Icons","version":"","breadcrumbs":"Foundations / Visual / Iconography / Product Launch Icons","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Product launch icons help communicate the purpose of the SAP Business Suite experience, enabling users to instantly identify products on the suite’s home page and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/iconography/media_10952068250c81adf878514e83076aee6115ca995.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-for-notifications","title":"UX Writing for Notifications","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing for Notifications","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Guidelines for writing consistent notification texts.","intro-desc":"Notifications are system-generated messages that notify users about significant changes in workflows, processes, or data. They inform without interrupting work, and acting on them is optional.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/media_195a416f837f5d751ecd5dd1ede8dacc7736e4055.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/typography","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article outlines best practices for text wrapping and truncation, ensuring consistent behavior across devices and controls.","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording","title":"Writing and Wording","version":"","breadcrumbs":"Foundations / Writing and Wording","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/typography/typography","title":"Typography – Quartz","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography – Quartz","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s proprietary 72 typeface is designed for legibility, robust hierarchy, brand voice, language support, and accessibility in SAP Fiori applications.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Launchpad home page is the customizable entry point for accessing apps, with tiles and links for easy navigation on mobile and desktop.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/integration-and-services/sap-fiori-launchpad/media_1f2981ddaf70261c89e9be9e125786fbbea0eac2b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/iconography/service-icons","title":"Service Icons","version":"","breadcrumbs":"Foundations / Visual / Iconography / Service Icons","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Service icons ensure consistent, inclusive metaphors for SAP Fiori applications, aligning with native app icon design for third-party marketplaces.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/iconography/media_1e03f65455d1928106fd98f9c9c00e827845a82e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is an additional visual theme for SAP Fiori, offering a color palette that enhances user direction and association.","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/screen-reader","title":"Screen Reader","version":"","breadcrumbs":"Foundations / Interaction / Screen Reader","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Overview of what is necessary to make a UI component accessible to screen readers.","intro-desc":"Every application and UI component should be designed to allow blind and visually impaired users to utilize screen reader announcements for all relevant content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/messaging/processing-multiple-items","title":"Message Handling – Processing Multiple Items","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Processing Multiple Items","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline covers how to communicate the status of multiple item processing, including success, failure, and partial processing, with clear messages for users.","intro-desc":"When a user selects multiple items from a table, it might not be possible to process all of the items at once.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/messaging/media_1f814c060f04e00e414ce785987d3ef3a347b4c32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Object Handling (Create, Edit, Delete)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers actions for objects, including creating, editing, and deleting, with options to create from scratch, copy, or reference existing objects.","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/interaction/wrapping-and-truncation","title":"Wrapping and Truncation","version":"","breadcrumbs":"Foundations / Interaction / Wrapping and Truncation","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn best practices for text wrapping and truncation, ensuring consistent behavior across devices and controls.","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls use wrapping to show full text or truncation to save space, depending on how important the information is and how much room is available.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/interaction/media_1b675c276d37e41908525b4ca9a525e582e413f6b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is an alternative SAP Fiori theme that uses a clean, lightweight color palette for a consistent and coherent user interface design.","intro-desc":"Quartz Light is an alternative theme for SAP Fiori applications. Color communicates importance and association and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator helps identify translation space needs and potential truncation issues in SAP Fiori apps, based on extensive translation data.","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/ux-illustrations","title":"UX Illustrations","version":"","breadcrumbs":"Foundations / Visual / UX Illustrations","lastModified":1781346127,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"UX illustrations enhance understanding, make complex ideas relatable, and add personality to create an emotional connection with users.","intro-desc":"UX illustrations simplify complex information, enhance comprehension, and boost engagement through visual storytelling in user interfaces. Thoughtful use of illustrations supports a human-centered experience, making interactions feel approachable, relatable, and meaningful.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_1cc1ee328b1daa942b7556ee6a8df7bd3433e8125.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/theming","title":"Theming","version":"","breadcrumbs":"Foundations / Visual / Theming","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The latest SAP theme, Morning Horizon, is complemented by alternative themes like Evening Horizon, Quartz Light, Quartz Dark, and high-contrast accessibility options.","intro-desc":"The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also Quartz Light, Quartz Dark and the accessibility themes High-Contrast Black (HCB) and High-Contrast White (HCW).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/media_1a45413ea46ccff86dd6b5add932ebb90eca1d89a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1781346126,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to organize and place actions in SAP Fiori, ensuring they are easily accessible and clearly differentiated from navigation.","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ui-text-guidelines-for-sap-fiori","title":"UI Text Guidelines for SAP Fiori Apps","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Guidelines for SAP Fiori Apps","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","intro-desc":"This page contains product-specific UI text guidelines for SAP Fiori. It is split into two parts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/media_18fcfcbc6be57e98137ab8258b2d3a9eb90b8a202.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ai-ui-text","title":"AI UI Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / AI UI Text","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI UI text serves as the primary means of communication between users and AI systems. It plays a crucial role in conveying information, instructions, errors, ...","intro-desc":"AI UI text serves as the primary means of communication between users and AI systems. It plays a crucial role in conveying information, instructions, errors, and feedback – ensuring that users can understand and effectively interact with the AI functionality.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/media_169c77503af531ab3b4d9b89d48f4a691cf47572a.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/visual/colors/quartz-dark-colors","title":"Quartz Dark Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Dark Colors","lastModified":1781346127,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Dark is a dark theme for SAP Fiori applications, designed for low-light environments, ensuring a clean and consistent user interface.","intro-desc":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/visual/colors/media_14502ab4f6d1a3687f67f65a2395e4672020106de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme","title":"WalkMe","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out our evolving content design resources for WalkMe content creators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/analytical-list-page","title":"Analytical List Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page Floorplan","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The Analytical List Page (ALP) provides seamless data analysis, visualization, and actionable insights in one view, enabling users to explore, identify patterns, and take action on transactional content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/walkme-intro","title":"About the WalkMe Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / WalkMe","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This Content Design Toolkit is intended for WalkMe content creators (Content Designers, Builders, UAs).","intro-desc":"This Content Design Toolkit is intended for WalkMe content creators (Content Designers, Builders, User Assistance Developers).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans","title":"Floorplans","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types","title":"Page Types","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page","title":"Overview Page (OVP) Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) Floorplan","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app that organizes task-specific cards, allowing users to efficiently view, filter, and act on information based on their role.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines","title":"UX Writing Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Beta version of the new UX writing guidelines","intro-desc":"These guidelines are for anyone who handles product content at any stage of the lifecycle – from User Assistance Developers and UX Designers to Product Managers, Engineers, and Translators. They cover foundational principles, UI copy guidelines, accessibility, AI integration, and other in-product experiences that complement our product documentation on SAP Help Portal.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/ai-integration","title":"AI Integration","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / AI Integration","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI is reshaping both the words we ship and the way we write them. This page gives a quick tour of two areas: making product content work for people and AI agents, and using generative tools in your content workflow.","intro-desc":"AI is reshaping both the words we ship and the way we write them. This page gives a quick tour of two areas: making product content work for people and AI agents, and using generative tools in your content workflow.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/translation-and-localization","title":"Translation and Localization","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guideline","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP is a global company and because our products are offered to customers all around the world, the user assistance and user interfaces are translated and localized in up to 50 languages. To ensure a good user experience in all languages, make sure to keep these guidelines in mind:   Consistency: Be consistent both within your product as well as across the suite. This includes style, tone, word choice, etc.  Terminology: Use consistent terminology with SAPTerm as source.  Comprehensibility: Keep your language clear and easy to understand, also for people without first-language proficiency in English.  Style and tone of voice: Create your content with the SAP Brand voice in mind. Remember that our brand personality is the “approachable expert”.  People-centric approach: Tailor your content to the needs of your target group and develop a conversational style and tone of voice that fits both your product area and your audience.  Linguistic correctness: This may sound like a no-brainer, but linguistic correctness is the non-negotiable prerequisite for good user experience, customer satisfaction, and a basis for efficient translation. Make sure to review your content for language, grammar, and punctuation on top of the aspects mentioned above.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Custom cards offer flexible design and content options for overview pages, allowing for features beyond standard cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/walkme-boilerplate","title":"WalkMe Boilerplate Text and Examples","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Boilerplate Text and Examples","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section includes step balloons for tasks/UI elements that are consistent across many SAP products.","intro-desc":"This section includes step balloons for tasks/UI elements that are consistent across many SAP products. We’ve collected examples here that you can use/copy “as-is” or tweak slightly for your specific circumstances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/media_1998ec4e75b159c15d42d46d0ed565bbb083c7fc7.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"List cards display items or links in various formats, including list, bar chart, and link types, with options for icons and images.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The overview page enables immediate action through integrated card types (stack card, object stream, and quick view card) that allow users to interact without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/walkme-content-guidelines","title":"Content Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Content Guidelines","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section provides WalkMe content guidelines.","intro-desc":"This section provides WalkMe content guidelines. Most of these guidelines align with SAP Fiori UI text design patterns and most User Assistance (UA) Style Guides. However, a few rules differ to better align with the tone and learning experience we want to provide within WalkMe experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/media_120a9d38dcbb17911349ae052a58d7fac5f6bb438.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/accessibility","title":"Writing for Accessibility","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / Writing for Accessibility","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to interact with and successfully use the product. Accessible UX writing ensures our products are usable by everyone, including people with disabilities. Here are key reasons why accessibility is important in UX writing:      Legal Requirements: Many countries have legal requirements for accessibility (for example,  ADA in the U.S., WCAG guidelines, European Accessibility Act).   Expanding User Base: Accessible UX writing opens the door to a larger audience, including individuals with disabilities, older adults, and people with temporary impairments.   Better User Experience: Accessible features often improve the user experience for all, making interfaces easier to navigate and reducing cognitive overload.   Social Responsibility: Inclusivity and accessibility are ethical imperatives, ensuring digital products are available to everyone, regardless of their abilities.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards display items in a table format using the responsive SAPUI5 control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/basics","title":"Basics","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / Basics","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The words in our products matter. They help professionals navigate complex business processes and carry out mission-critical tasks. The right words can ensure success while the wrong words can cause confusion and error. To meet this challenge, SAP's product writing is precise, clear, and consistent. We craft content that demonstrates our respect for the professionals who rely on our suite of products. Our words enable them to run their businesses on SAP software. We call our product voice the approachable expert. This persona balances technical expertise with empathy and respect. These guidelines lay the foundation for achieving this voice and creating clear and consistent experiences across the SAP suite of products.","intro-desc":"The words in our products matter. They help professionals navigate complex business processes and carry out mission-critical tasks. The right words can ensure success while the wrong words can cause confusion and error.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/ui-text","title":"Mechanics for UI Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UX Writing Guidelines / Mechanics of UI Text","lastModified":1784931182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mechanics of UX writing define how we apply our voice in practice. They turn principles into repeatable decisions that scale across products, teams, and languages.&nbsp;  Clear mechanics support all three strategic priorities:&nbsp; Suite first by ensuring consistency across the product landscape&nbsp;    AI first by making language predictable and machine-readable&nbsp;    People-centric by reducing ambiguity and cognitive effort for users&nbsp;   These guidelines are not stylistic preferences. They are standards designed to help users move confidently through complex processes.&nbsp;","intro-desc":"The mechanics of UX writing define how we apply our voice in practice. They turn principles into repeatable decisions that scale across products, teams, and languages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/ux-writing/ux-writing-guidelines/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/media_19fb37ced7333a42274b1bc8915cbfed7a046975a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Cards","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Cards","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards on the overview page organize key app content, offering a focused, non-editable view of relevant data from multiple sources in various formats.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The fixed card layout offers predefined card sizes in responsive, collapsible columns for a compact and focused overview page display.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To explore the design capabilities of SAP Fiori elements for OData V4 and experiment with their behavior, see Overview Page in the SAP Fiori Development ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page/media_10987990b7b041e44a914b702aa39e51da4b32342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout allows users to personalize card position and size, adapting content to fit business needs and available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"This article explains worklists, which help users manage and process items, offering variants like simple lists, tabbed lists, and KPI-tagged lists for different needs.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/walkme-toolkit-guidelines","title":"Toolkit Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / WalkMe / Toolkit Guidelines","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.","intro-desc":"This section provides guidance and examples on the type of instructional content to include in different parts of a WalkMe tour.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/walkme/media_1ead77ffbe996bb533dd3a5fa0738aa22ca603e7f.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"Letterboxing in SAP Fiori restricts the UI width to 1280px, ensuring consistent aspect ratios, with optional use for adapting to larger screens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/analytical-list-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To explore the design capabilities of SAP Fiori elements for OData V4 and experiment with their behavior, see Analytical List Report in the SAP Fiori ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/analytical-list-page/media_1bce9986520016e88c27baa7a42d785b45086b71a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/page-web-component","title":"Page","version":"","breadcrumbs":"Page Types / Page Layouts / Page","lastModified":1781346144,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts","title":"Page Layouts","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/initial-page-floorplan/media_1c24b9881a2fb6ef7a56e348a9954eadb038b73b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/dynamic-page-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is a generic layout control designed to support various floorplans and use cases.","intro-desc":"The dynamic page is a generic layout control designed to support various floorplans and use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/dynamic-page-web-component/media_1286bdfe0ab57adc42b3e48331bc4f453c508343f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see Worklist in the SAP Fiori Elements section.","intro-desc":"A worklist displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/work-list/media_1da586d19728bbc318a095878202d146cb1bf1aa0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system optimizes padding between elements in SAP Fiori interfaces using responsive padding and margin classes.","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined ...","intro-desc":"The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/semantic-page/media_128a69021abefd20cd335eeb71738fafed96eaae1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries","title":"Libraries","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/ai-ui-starter-kit","title":"AI UI Starter Kit","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This UI kit was replaced by the SAP AI Web UI Kit.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1784977278,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode. The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can freely resize the columns, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-column-layout/media_1be0116a17f6906d6b170b0f48ddd63da33da9aac.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page. Beforehand, the user selects the objects from another page, usually ...","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.\nBeforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.\nAs a result, the user can work on several objects simultaneously and switch between them easily.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/when-to-use-which-floorplan","title":"When to Use Which Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / When to Use Which Floorplan","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article explains SAP Fiori floorplans, which are designed for different tasks like providing overviews, listing objects, managing objects, or focusing on a single object.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1038cab413a616913e9b43568a3e103b9fe31d937.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1781346144,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page in SAP Fiori offers a flexible layout with a collapsible header and optional footer toolbar, supporting various floor plans and use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/dynamic-page-web-component","title":"Dynamic Page Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1781346144,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"A layout component, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-grid/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also ...","intro-desc":"The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can also customize the grid by aligning and arranging your elements to suit your content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-grid/media_1aa1ad1f3fccb9dbb40debc7533de84f2611f4835.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/page-header","title":"Page Header","version":"","breadcrumbs":"Page Types / Page Layouts / Page Header","lastModified":1781346144,"designowner":"Core Design Web","uielementstechnology":"","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"A well-designed page header enhances navigation, sets UX tone, and adapts flexibly to varied app scenarios.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"This article explains how list reports allow users to view, filter, and act on large sets of items, often serving as a gateway to item details.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/design-stencils-for-adobe-xd-2","title":"Design Stencils for Adobe XD","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-column-layout-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a pattern for displaying multiple floorplans on a single page. The flexible column layout is not restricted to a specific ...","intro-desc":"The flexible column layout is a pattern for displaying multiple floorplans on a single page. The flexible column layout is not restricted to a specific floorplan, as long as it is responsive down to phone size.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-column-layout-web-component/media_17e10ffe3c01247fac68fb9814973c016c1c26c7a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/page-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The page is a container component for a full application screen comprising a header, content area, and footer.","intro-desc":"The page is a container component for a full application screen comprising a header, content area, and footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/page-web-component/media_1428b3579991178bdf89b7030feff3a9afed9db4d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/web-assistant","title":"SAP Companion","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / SAP Companion","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Companion offers context-sensitive help and guided tours in SAP Fiori apps, enhancing the user experience with in-app assistance.","intro-desc":"SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on top of the current application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/writing-and-wording/media_13bfab4ae6bcc6c39aefca7e82ba6f84cb5a034df.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplan-overview","title":"Page Layouts and Floorplans","version":"","breadcrumbs":"Page Types / Page Layouts and Floorplans","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of how SAP Fiori layouts and floor plans are used to build application pages.","intro-desc":"This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/media_1c4d78afccc080f19471585c3c3a457cddaaef55e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/semantic-page","title":"Semantic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Semantic Page Layout","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is a predefined layout for freestyle apps, enhancing the dynamic page with predefined header and footer elements, aligning with SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/letter-boxing/media_1b9793eb36bcd37dcb7e0f6f6875f012c4604a06c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources","title":"Resources","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/ux-illustration-creation-kit","title":"UX Illustration Creation Kit","version":"","breadcrumbs":"Resources / UI Kits / UX Illustration Creation Kit","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UX Illustration Creation Kit helps lines of business create custom illustrations using a library of predefined assets.","intro-desc":"The UX Illustration Creation Kit helps lines of business (LoBs) create custom illustrations. Instead of requesting illustrations, you can use the kit to build what you need.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_10e5e58df7ff4b6d199b3e48ddcb18c0ad0d33342.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-column-layout-web-component","title":"Flexible Column Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1781346144,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout enables seamless navigation across multiple floorplans on a single page with resizable columns and various layout options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/design-stencils-for-sketch","title":"Design Stencils for Sketch","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/sap-fiori-for-web-ui-kit","title":"SAP Fiori for Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP Fiori for Web UI Kit","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and ...","intro-desc":"The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and development processes and encourages consistency.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_14caac037c8d76ae5beeec55581a5305675042024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"external_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/sap-ai-web-ui-kit","title":"SAP AI Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP AI Web UI Kit","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the SAP AI Web UI Kit for Figma to speed up the design and development of AI features for your product. It’s ...","intro-desc":"You can use the SAP AI Web UI Kit for Figma to speed up the design and development of AI features for your product. It’s been designed to help you create responsible, accessible, and human-centered AI experiences with ease.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/ai-skills","title":"AI Skills","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout lets users view and edit multiple objects on one page, with each object displayed in a separate tab.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/ai-skills/sap-fiori-guidelines","title":"AI Skill for SAP Fiori Guidelines","version":"","breadcrumbs":"Resources / AI Skill for SAP Design System","lastModified":1784189082,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Bring the SAP Fiori for Web design guidelines directly into your favorite AI tools.","intro-desc":"With the SAP Fiori Guidelines skill, you can use the SAP design guidelines directly inside your AI tools as you design and build.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/ai-skills/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"external_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/ai-skills/sap-design-system","title":"AI Skill for SAP Design System (internal)","version":"","breadcrumbs":"Resources / AI Skill for SAP Design System","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Bring the SAP Fiori for Web design guidelines directly into your favorite AI tools.","intro-desc":"We're bringing the SAP Design System into your favorite AI tools. This new skill brings our web design guidelines directly into Claude Code, GitHub Copilot, Cursor, and Cline, so developers get smarter suggestions and faster workflows.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/ai-skills/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/sap-web-ui-kit","title":"SAP Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP Web UI Kit","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit in Figma provides commonly used components like buttons and inputs, which can be used standalone or as a connected library for product-specific extensions.","intro-desc":"The SAP Web UI Kit in Figma contains the components used most commonly across SAP products, such as buttons and inputs. It can be used standalone, although many product teams use it as a connected library that can be cascaded to their own product-specific extensions. This means that they do not have to duplicate the commonly used components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_15c271d8b305f3e6888cc247ed4743ccde3253e32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346144,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/joule-web-ui-kit","title":"Joule Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / Joule Web UI Kit","lastModified":1781346145,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article details the SAP Joule Web UI Kit, which includes design foundations, core components, UX patterns, and content, accessible in Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1910616f73010fb485ee3edb920fbb48cd365c3fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1781346144,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control enables responsive layouts with customizable columns and rows for optimal display on both desktop and mobile devices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/icon-creation-kit","title":"Icon Creation Kit","version":"","breadcrumbs":"Resources / UI Kits / Icon Creation Kit","lastModified":1784931207,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon creation kit helps lines of business create high-quality, consistent icons for specific needs. By using existing assets and clear design guidance, teams can create icons efficiently. The result aligns with the broader visual language while still supporting unique use cases. At the core of the kit is a comprehensive line icon library. It includes a wide range of ready-made icons that you can adapt and modify. This lets users customize visuals without starting from scratch. The kit focuses on creating and handling SVG assets. You can also use it to prepare line icons for integration into the SAP icon font. This supports both SVG-based and font-based icon workflows. For best results, always use the kit together with the icon guidance. Combined, they provide the tools, standards, and direction you need to create cohesive, high-quality icon sets.","intro-desc":"The icon creation kit helps lines of business create high-quality, consistent icons for specific needs. By using existing assets and clear design guidance, teams can create icons efficiently. The result aligns with the broader visual language while still supporting unique use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/ui-kit-overview","title":"UI Kits - Overview","version":"","breadcrumbs":"Resources / UI Kits / UI Kits - Overview","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP UI kit ecosystem provides a modular foundation for creating consistent, scalable user experiences across SAP products. At its core, it enables product teams ...","intro-desc":"The SAP UI kit ecosystem provides a modular foundation for creating consistent, scalable user experiences across SAP products. At its core, it enables product teams to build and extend their own design kits while maintaining visual and functional coherence across applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/design-stencils-for-axure-rp","title":"Design Stencils for Axure RP","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"We now provide SAP Fiori web UI kits for Figma.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/page-header/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The page header is a crucial component of any application interface, serving as the first point of interaction for users. A well-designed header not only ...","intro-desc":"The page header is a crucial component of any application interface, serving as the first point of interaction for users. A well-designed header not only enhances navigation but also sets the tone for the entire user experience. This guideline is based on the dynamic page header, which offers a flexible structure and interaction capabilities to support a variety of application scenarios.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/page-header/media_117bf762c8db67f89939906a4ca4e209b10f3502e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For more information, see the topics for the list report header and content area in the SAP Fiori Elements section.","intro-desc":"With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_1549c39ca8f620954aec85464c960f4de7b633ee8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346145,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/page-types/floorplans/object-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782912038,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"For information on the default settings and other options for the SAP Fiori element implementation, see the topics for the object page overview, header, content ...","intro-desc":"The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/page-types/floorplans/object-page/media_15f578a0c33aa6dda2b04ee87e20811a0a2c98a57.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1785504368,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/avatar-web-component/media_159081a52050ba53a101c7e33dcd5628729bbb3c9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-strip-web-component","title":"Message Strip (Web Component)","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the message strip component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar-group","title":"Avatar Group","version":"","breadcrumbs":"UI Elements / Avatar Group","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar group displays a number of avatars, which act as a digital representation of a user.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19a2aaa99a40e4b4faac2a3d47d76ea3b864f575f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar-group-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is optimized for handling large numbers of rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_14af2ba20c348efcf7a2da4640d1f43e76e286856.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/checkbox","title":"Checkbox","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox lets the user set a binary value (such as “true/false”).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_14c7903a0117bd2fee9d8c5b94949d41b9381d8b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/input-field","title":"Input","version":"","breadcrumbs":"UI Elements / Input","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A text input field allows users to enter and edit text or numeric values in one line.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1dbb9058a46440aa1fdf3332a2280754f738b8d10.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar-web-component","title":"Avatar (Web Component)","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Avatar component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-acknowledgment","title":"AI Acknowledgment","version":"","breadcrumbs":"UI Elements / AI Acknowledgment","lastModified":1781346163,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Informs users about the opportunities, risks, and limitations of an AI service.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_176cee28492673485e3f40e0650e889b96d30ce5b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-picker-web-component","title":"Date Picker","version":"","breadcrumbs":"","lastModified":1784931207,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.145.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date/time picker allows users to select date and time values in a combined input.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_180d6045951fc4ad7bd20ae646dc035544bee1a4a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements","title":"UI Elements","version":"","breadcrumbs":"","lastModified":1781346162,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date picker lets users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19f2bca5fd4c82fd2feb80a5158512dcab8982037.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/link-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/link-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/regenerate","title":"Regenerate","version":"","breadcrumbs":"UI Elements / Regenerate","lastModified":1781346164,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"Allows users to iterate and refine AI-generated content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_142b6c0aa2e601155814d0a92e4d7f535c44c81d8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI button is made up of the following elements to enable AI-powered functions:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/ai-button/media_13f678ec89b54c773a9f26003000d08ac4a6bf640.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-popover-web-component","title":"Responsive Popover","version":"","breadcrumbs":"UI Elements / Responsive Popover","lastModified":1781346164,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive popover displays as a popover on desktop and tablet devices but as a dialog on phones.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-popover-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/responsive-popover-web-component/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-table","title":"Responsive Table","version":"","breadcrumbs":"UI Elements / Responsive Table","lastModified":1781346164,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The responsive table contains a set of line items and is fully responsive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ec5bf5802ea135f739db35c25ecf3e66bb073903.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/checkbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox lets users make a yes or no choice or turn a setting on or off. The checked state means the option is on ...","intro-desc":"A checkbox lets users make a yes or no choice or turn a setting on or off. The checked state means the option is on or selected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/checkbox/media_12d611bf9595c410f8fd554460012e83598fb7831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-strip-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/file-uploader","title":"File Uploader","version":"","breadcrumbs":"UI Elements / File Uploader","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The file uploader allows users to select single or multiple files and upload to a specific location.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_109ae63dea7d10a3e0dfd7964597e2e5f4012ec73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-picker-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/date-picker-web-component/media_16b87a31ef407a02454da54ff29e6ca5c73a84056.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/guided-prompts","title":"Guided Prompts","version":"","breadcrumbs":"UI Elements / Guided Prompts","lastModified":1781346163,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Guide users in instructing the generative Al model.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_150354488b8cab79c7b0a06d5b66d201094fca61e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-time-picker-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/date-time-picker-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/button","title":"Button","version":"","breadcrumbs":"UI Elements / Button","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons enable users to trigger actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_16842c4c5b7fb018d89020b97595860dce12d0b4b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual ...","intro-desc":"Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual styles to reflect purpose, priority, and intent. Button behavior and appearance can change depending on user interaction, layout context, or the type of task.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/button/media_15e9fdbfaf05ed46509bd13c7665f9c674afb053e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages ...","intro-desc":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages or sections of an application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/link/media_1e6da0bfa1119ae44e8ec46832b3605b7dee8de60.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The popover is a small overlay window that appears on top of an existing UI element. It displays additional information for an object in a ...","intro-desc":"The popover is a small overlay window that appears on top of an existing UI element. It displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/popover/media_112a827781ac163a0df24e6cbc727b7d91c1c10b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/file-uploader/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The file uploader lets users select one or more files using their local file explorer and upload them to the application. Uploading starts automatically as ...","intro-desc":"The file uploader lets users select one or more files using their local file explorer and upload them to the application. Uploading starts automatically as soon as users select the files.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/file-uploader/media_1077a8917461f9eed54517d2ca6f62bf3234054b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/user-research-overview","title":"User Research Overview","version":"","breadcrumbs":"Resources / User Research","lastModified":1781346162,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the user research resources available to support your design-led development journey.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/guided-prompts/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Guided prompts provide structured input fields and controls that help users instruct the generative AI model on the desired output without having to write descriptive ...","intro-desc":"Guided prompts provide structured input fields and controls that help users instruct the generative AI model on the desired output without having to write descriptive [external_only]custom prompts[/external_only][internal_only]custom prompts[/internal_only]. Guided prompts are useful when users want to specify attributes, styles, or criteria for the generated content, such as length or language.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/guided-prompts/media_1c6a941720ead4c23eb57fc04b79798a674cb9f94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/input-web-component","title":"Input","version":"","breadcrumbs":"","lastModified":1784931207,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.142.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-acknowledgment/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI acknowledgment message box on new SAP CX AI toolkit capabilities","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/ai-acknowledgment/media_176cee28492673485e3f40e0650e889b96d30ce5b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/input-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1785502287,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/input-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The icon tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_175d3e5c9322b26b1fcdde65b6ce73fb05132a9e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-button","title":"AI Button","version":"","breadcrumbs":"UI Elements / AI Button","lastModified":1781346163,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"AI buttons allow users to trigger AI-powered actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13f678ec89b54c773a9f26003000d08ac4a6bf640.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-writing-assistant","title":"AI Writing Assistant","version":"","breadcrumbs":"UI Elements / AI Writing Assistant","lastModified":1781346163,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Assists users in creating, iterating, and improving text entries.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c5af394677fcd53972e9e16b951d980f4dbf1783.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-time-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/cards","title":"Card","version":"","breadcrumbs":"UI Elements / Card","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b3785aabcb190e8947ea3c176a7a4e9bff73e548.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/home-page-banner","title":"Home Page Banner","version":"","breadcrumbs":"UI Elements / Home Page Banner","lastModified":1781346163,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Harmonized banner for SAP product home pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1d4771c5433018e6c4e66aca688f362ae01f61388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1781346163,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ea56d2e9bb720ba135015de98dbda62c1550383a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar-group-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/avatar-group-web-component/media_1fe63deac4ec22a90fa9acf174e18a5bf4bdd812a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar","title":"Avatar","version":"","breadcrumbs":"UI Elements / Avatar","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The avatar is a component for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1dbae460739853c52030a278271e1f936690e7ab1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/analytical-table-alv","title":"Analytical Table (ALV)","version":"","breadcrumbs":"UI Elements / Analytical Table (ALV)","lastModified":1784931208,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"An analytical table, also known as an ALV or ULV, contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.In contrast to other tables, the analytical data binding used by the analytical table allows an aggregated number to be shown automatically in a cell. This means that a number in such a summarized cell is a total sum of several lines in the database.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_18b73cb1e28bec04145d94f0ddbe4e63c36cfea90.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/downloads","title":"Download Fonts","version":"","breadcrumbs":"Resources / Libraries / Download Fonts","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the links below to download the following SAP fonts:","intro-desc":"You can use the links below to download the following SAP fonts:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/media_1a1ac3038474b7271aa7b795170107ac1f8223182.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar-group/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The avatar group is a visual element that displays several avatars together, indicating that more than one person or business entity is associated with an ...","intro-desc":"The avatar group is a visual element that displays several avatars together, indicating that more than one person or business entity is associated with an item. It’s typically used to represent a group of people who belong together – for example, members of a project team or department.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/avatar-group/media_164b1f7fe5427d46468b7bd79c5500ae022dd133a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet","title":"Responsive Table – Content Formatting Cheat Sheet","version":"","breadcrumbs":"UI Elements / Responsive Table / Responsive Table – Content Formatting Cheat Sheet","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/popover-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/popover-web-component/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/grid-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the ...","intro-desc":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid. This makes it ideal for displaying visual content, such as images, charts, or object cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/grid-list/media_1b454ce5b965ffd3cacbcca0cf7f7a9a4e50a737d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar-group-web-component","title":"Avatar Group (Web Component)","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Avatar Group component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/p13n-dialog-popup","title":"P13n Dialog","version":"","breadcrumbs":"UI Elements / P13n Dialog","lastModified":1781346163,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19cbd5d381c117e5ad1479bdf7626722b56e7e298.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1781346163,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Notifications are the best way to make users aware of a situation that requires timely action or attention.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_116727355369bb5e81890b17c73ee2adb7f6ff5b1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/range-slider-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/analytical-table-alv/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An analytical table[internal_only], also known as an ALV or ULV, [/internal_only] contains a set of data that is structured in rows and columns. It provides several ...","intro-desc":"An analytical table[internal_only], also known as an ALV or ULV,[/internal_only] contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/analytical-table-alv/media_19f2517bb7bb602acd379d50d65c8b4f22d3c2b84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/quick-prompts","title":"Quick Prompts","version":"","breadcrumbs":"UI Elements / Quick Prompts","lastModified":1781346163,"designowner":"AI Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"Prompts that are integrated into workflows for easy access.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12ec83170d74cda11e01c5d6fcb7875b53e65b331.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1781346163,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The grid list displays a set of items. Whereas the list and the responsive table display the items in rows, the grid list displays the items as rectangular boxes on a grid.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b94ff8523a28259079e446fee8b17687562c175f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/notification-center/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Notifications serve as real-time alerts, providing users with information about significant events, updates, or changes in business processes, workflows, or data. Notifications ensure users remain ...","intro-desc":"Notifications serve as real-time alerts, providing users with information about significant events, updates, or changes in business processes, workflows, or data. Notifications ensure users remain informed and can take timely action or make decisions without disrupting ongoing tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/notification-center/media_12b2ca0735ece3cf5ccf3e4c73403f7d576f63bc5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/p13n-dialog-popup/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/p13n-dialog-popup/media_151c7773aec722459550cdf5e511017c2c3bfe25e.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/range-slider-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/range-slider-web-component/media_18ef848600ce1435d0e1ab6af9bb2305d8107daba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/popover-web-component","title":"Popover (Web Component)","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A popover is a small overlay window that appears on top of the existing content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/avatar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Avatars are visual representations of users, products, or business entities, helping people quickly identify them within an application. Users can be shown with their own ...","intro-desc":"Avatars are visual representations of users, products, or business entities, helping people quickly identify them within an application. Users can be shown with their own photos or initials, while products can be depicted with representative images or logos.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/avatar/media_1e6fe5715bb11a8601431411546cd1eb3a52283eb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/regenerate/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The regenerate pattern provides a general approach for using AI to create or modify content across different scenarios. It lets users generate alternative AI results ...","intro-desc":"The regenerate pattern provides a general approach for using AI to create or modify content across different scenarios. It lets users generate alternative AI results or update existing AI-generated content, such as text, images, or other digital items, with the help of AI. Users can also iteratively refine the results to better match their needs or preferences.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/regenerate/media_116bb96a54e4e5a371437b0f72388f96d5c9b0617.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/link-web-component","title":"Link (Web Component)","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A link (also known as a hyperlink) is an interactive text element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1784931207,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages or sections of an application.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10d93447f54d3b633fbf80c98e5f3922f4a1b0d2f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/local-ai-notice","title":"Local AI Notice","version":"","breadcrumbs":"UI Elements / Local AI Notice","lastModified":1781346163,"designowner":"AI Design System","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Ensures users are informed when content is AI-generated.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_111cf81704a857f48ef261ae80001547152c15859.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/home-page-banner/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The home page banner is a standard card used in the hero space of the product home page. It can accommodate different elements, depending on ...","intro-desc":"The home page banner is a standard card used in the hero space of the product home page. It can accommodate different elements, depending on the needs of each product. The banner creates a consistent experience across SAP Business Suite home pages while still allowing for flexibility at the product level.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/home-page-banner/media_180ae49aaffec151aeef7983c0efac9661ab86112.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/range-slider-web-component","title":"Range Slider (Web Component)","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A range slider enables the user to select a value range within a given numeric interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/range-slider","title":"Range Slider","version":"","breadcrumbs":"UI Elements / Range Slider","lastModified":1781346164,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A range slider is a user interface component that enables the user to select a value range within a predefined numerical interval.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_17f8eda2cfe03e9022456ad449c1a949d7927cc17.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-strip-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/message-strip-web-component/media_1db866de4477797c3877ee9d857ac5621de27e63f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/quick-prompts/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In generative AI, prompts are essential for guiding the AI's output. Clear and effective instructions ensure that the output aligns with the user’s needs.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/quick-prompts/media_12fad6d326285ab52d279656de345cd01164cbcce.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/local-ai-notice/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The local AI notice pattern ensures users are informed when content is AI-generated, encouraging them to verify its accuracy prior to use.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/local-ai-notice/media_1b383f537482fb0306fe2afa1dfa8d7ee7a40478b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-time-picker-web-component","title":"Date/Time Picker (Web Component)","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Date/Time Picker component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/link-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-writing-assistant/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article discusses the usage of the AI writing assistant.","intro-desc":"This article discusses the usage of the AI writing assistant.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/ai-writing-assistant/media_1a133702a4ff992e0f00dec1e8164eaeffd414a1d.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346163,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and ...","intro-desc":"The filter bar lets users set criteria to limit the data loaded and displayed in a table. It is part of the list report and the overview page, and is also available as an alternative layout to the visual filter bar in the analytical list page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/filter-bar/media_11c6902d5d90de4e39bff6479df53fb9e66de70ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message strip is a component that is used as an information bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1a682f1190281d6b952b6687f328fc4007bff26fe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/popover","title":"Popover","version":"","breadcrumbs":"UI Elements / Popover","lastModified":1781346163,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The popover displays additional information for an object in a compact way and without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1db7db3b57da7418df2fbca3694e71410b49eb96d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/icontabbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The icon tab bar is a navigation and filtering control that contains a set of tabs, each of which can display an icon, text, or ...","intro-desc":"The icon tab bar is a navigation and filtering control that contains a set of tabs, each of which can display an icon, text, or both and link to a different content area or view.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/icontabbar/media_1994d178fa4940bc374053fa217c28d650dcb7db6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/category-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb ...","intro-desc":"You can use the category navigation pattern to replace tree-like structures with only a few levels in a responsive environment. In this pattern, the breadcrumb control replaces the title control. The category navigation pattern is used only in rare cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/category-navigation/media_16ea748199d8c402123173db74045f3537b3b5388.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date picker is a UI component used to select a single date using touch, mouse, or keyboard input. It supports manual entry in the ...","intro-desc":"The date picker is a UI component used to select a single date using touch, mouse, or keyboard input. It supports manual entry in the input field and calendar-based selection via the date picker button.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/date-picker/media_1265ebd5114adc1fca492c73ba8582437228be98b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-strip/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message strip component displays application-related messages directly within the interface. It draws attention to important information, such as warnings or status changes, that might ...","intro-desc":"The message strip component displays application-related messages directly within the interface. It draws attention to important information, such as warnings or status changes, that might otherwise go unnoticed. The message strip component can be embedded within the header or detail area of an object or page, or it might apply only to a single component (for example, a table).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/message-strip/media_1673a9b7d793cc55e717af9a8ec2bdf49c4e9e01e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/range-slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A range slider is a UI component that lets users select a value range within a predefined numeric or non-numeric interval.","intro-desc":"A range slider is a UI component that lets users select a value range within a predefined numeric or non-numeric interval.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/range-slider/media_1f4c743a8fc7292703da6b643d739cff7d659b177.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/datetime-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date/time picker is a UI component that lets users select both date and time values within a unified input field. It combines a calendar ...","intro-desc":"The date/time picker is a UI component that lets users select both date and time values within a unified input field. It combines a calendar view with time selection, supporting both compact and cozy display modes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/datetime-picker/media_1aad48cb12a73298b5dff10de1ca0b3436a14cb9e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a ...","intro-desc":"A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/cards/media_12cff613555f634035aef58b44089d164475cab72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/input-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The input component lets users enter or edit single-line text or numeric values. You can enable autocomplete suggestions and value help to make data entry ...","intro-desc":"The input component lets users enter or edit single-line text or numeric values. You can enable autocomplete suggestions and value help to make data entry faster and more accurate.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/input-field/media_10ae881c67e670e17fe7c8244df9928f5f21ed07a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346165,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items ...","intro-desc":"The responsive table contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/media_172bfc0c08f7bd5be17c5648984cce48c777a8808.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/grid-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is ...","intro-desc":"A grid table contains a set of data that is structured in rows and columns. It allows users to scroll in both directions and is optimized for handling large numbers of rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/grid-table/media_1e209d643e6fa81eb0619cd4955bac893f66d1f68.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toggle-button","title":"Toggle Button","version":"","breadcrumbs":"UI Elements / Toggle Button","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1589cc9d29497316b15ced3b114a94c6c9a7e098d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bar is a container that can hold text, titles, buttons, and input elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/bar-web-component/media_195eaa0ad059716b2bc08d095fc47b63d839dc473.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toggle-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/button-web-component","title":"Button (Web Component)","version":"","breadcrumbs":"UI Elements / Button","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Buttons allow users to trigger an action and come in a variety of shapes and colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c7555695ba57b75e6df4879e383c5ff94f41e493.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/switch-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/user-menu/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented ...","intro-desc":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented by an avatar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/user-menu/media_1b1dc22c598ac90f2522e60cb8f665aa4968c0e63.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/3d-viewport/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit ...","intro-desc":"You can use the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/3d-viewport/media_16e4e5051e90a6974a92578231d985aabd9d90d74.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/breadcrumbs-web-component","title":"Breadcrumbs (Web Component)","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb is a type of secondary navigation that indicates the position of a page in the application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19d997197376a272627ebd090a6e5714473b74b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/action-sheet","title":"Action Sheet","version":"","breadcrumbs":"UI Elements / Action Sheet","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1381c1ca2dcf879ab68ec6ce17f5405b744528d39.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The toggle switch mimics a physical switch. It allows users to set individual features (such as personalization or display settings) to either active or inactive.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10f18fcdf5ab0c02427915434cdd7da325e1e9291.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-filter-bar-annotations/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart filter bar control is now maintained but no longer enhanced so no further versions of the guidelines will be published.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/smart-filter-bar-annotations/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calculation-builder","title":"Calculation Builder","version":"","breadcrumbs":"UI Elements / Calculation Builder","lastModified":1781346181,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1401999354baa258a65fe5be091da14f46a30dc6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-notice/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI Notice guideline has been replaced by the Local AI Notice guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/ai-notice/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-progress-indicator","title":"AI Progress Indicator","version":"","breadcrumbs":"UI Elements / AI Progress Indicator","lastModified":1781346181,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"Provides information about the status of a user’s AI request.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_164dfba42f4417b2f2c81eb6fe1a741bf068eb43e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-prompt-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The AI prompt input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed ...","intro-desc":"The AI prompt input is a core UI element for interacting with generative AI systems. Its primary function is facilitating instructions for AI systems expressed in natural language: custom prompts written by a user. In addition to text, it may also support other input options, such as images, voice, or various file formats.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/ai-prompt-input/media_1b2fe0981b422fbedaf5b607573bc6a8128e9166d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-bar","title":"Table Toolbar","version":"","breadcrumbs":"UI Elements / Table Toolbar","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The table toolbar always appears above the table. The control is used for key actions that impact the entire table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_158e7864d606e746af5bb2b9c06de5c45a035487a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-notice","title":"AI Notice","version":"","breadcrumbs":"UI Elements / AI Notice","lastModified":1784931365,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.136.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busy-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"The busy indicator informs the user about an ongoing operation.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/busy-indicator/media_1a63dbb512eb4de5785591c6c7d773261d5bc0e86.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/shell-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The shell bar is a universal header at the top of all screens. It offers both global functions (like search, notifications, and user profile) and ...","intro-desc":"The shell bar is a universal header at the top of all screens. It offers both global functions (like search, notifications, and user profile) and elements that are specific to the product context.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/shell-bar/media_1f820aaa3bcdadd326c30762b28677ed461f44482.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/action-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/action-sheet/media_1793e6be77583f4132b567990b06c63f05677c631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/breadcrumb","title":"Breadcrumbs","version":"","breadcrumbs":"UI Elements / Breadcrumbs","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_16ea7192a1f1bb7a1aefccde2c6154567c9904f38.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bar-web-component","title":"Bar","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Bar component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ca1db3ce6e0b18a473c5a08084e0ebb1ab5a51d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-prompt-input","title":"AI Prompt Input","version":"","breadcrumbs":"UI Elements / AI Prompt Input","lastModified":1781346181,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Target Design","description":"Enables users to submit custom AI prompts in natural language.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1f912b3f37982757c4967a3bd34743025fb66a64f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busy-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"If the space where the busy indicator is to be placed is limited, avoid using a busy icon text. For example, don’t show a text ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/busy-indicator-web-component/media_1300c93feb04a7f178ee1ccf3da8dd49f5f3c2b07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar-web-component","title":"Calendar (Web Component)","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar shows time-related data at a glance. It allows the user to select a single day, multiple days, or date ranges and to navigate through different months and years.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1d307d80994b71adf5d7744a87b4ddf37a5750fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/switch/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The switch is a UI component used to toggle a setting on or off with a button. It lets users turn individual features on or ...","intro-desc":"The switch is a UI component used to toggle a setting on or off with a button. It lets users turn individual features on or off to adjust display settings or personalize the application’s appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/switch/media_1e8fd779eb8193c7debbb192fcd4e24c6e9e00ef0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/breadcrumb/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically ...","intro-desc":"A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/breadcrumb/media_106c2c710fbf6f55fc4599675bd52c95e29cbc4aa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bullet-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional ...","intro-desc":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/bullet-micro-chart/media_13cb21345ac117c55c411ef54b386971a4c82c6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/segmented-button-web-component","title":"Segmented Button","version":"","breadcrumbs":"UI Elements / Segmented Button","lastModified":1781346181,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"","elementstatus":"","description":"A segmented button is a group of buttons that can be toggled.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/select","title":"Select","version":"","breadcrumbs":"UI Elements / Select","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select control (also known as a dropdown) is commonly used to enable users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1edcfbbb36602c322cb5ee00f83ce61968aec0b27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/slider/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The slider lets users select a value within a predefined numeric or non-numeric interval by dragging a handle along a track.","intro-desc":"The slider lets users select a value within a predefined numeric or non-numeric interval by dragging a handle along a track.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/slider/media_1f601a55be91b62963251f0deb97ca3d7e2cf6caf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/switch-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/switch-web-component/media_1afbf8e4c0e92fd70fa4252d017543166ca4600e7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/shell-bar","title":"Shell Bar","version":"","breadcrumbs":"UI Elements / Shell Bar","lastModified":1781346181,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The shell bar is a universal header at the top of all screens, providing product-specific and global functions like search, notifications, and user profile.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ce0eb21f30699ce18873094c6f3647883973fdea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/side-navigation","title":"Side Navigation","version":"","breadcrumbs":"UI Elements / Side Navigation","lastModified":1781346181,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The side navigation component provides a vertical menu that allows users to access different sections or pages of an application. It can be opened via the hamburger menu in the shell bar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_18d0c1bab1faf5a7c714f5d38d01e402ced5e90fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/action-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/action-list-item/media_1f192edd5b50c31f8c7a4a2fffe9904a0e1ffa061.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/segmented-button-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/segmented-button-web-component/media_1cc5eb714324a7a5c51cc13b5c3a1ef9065d67ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/select-web-component/usage","title":"Columns","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select component doesn't offer multiple types. Only the items in the dropdown list can have different types. You can also combine different dropdown list ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/select-web-component/media_1ac20082010df9e1f9d76c049ba02623e684a5c28.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/segmented-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/switch-web-component","title":"Switch","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The switch mimics a physical switch. It allows users to toggle individual features on or off.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/select-web-component","title":"Select (Web Component)","version":"","breadcrumbs":"UI Elements / Select","lastModified":1784931365,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select component lets users choose an item from a                     small, predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_155323df084726c2b74dabc1df64a578f298339e6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toggle-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toggle button is a UI component that switches between two states: active and inactive.","intro-desc":"The toggle button is a UI component that switches between two states: active and inactive.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/toggle-button/media_1c88a96f3d55e9e22272d4523d43029f21e8f0e16.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/action-list-item","title":"Action List Item","version":"","breadcrumbs":"UI Elements / Action List Item","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The action list item control lets the user trigger actions directly from a list. It is used mainly within dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10bb2d35197a587e97589e42fcfbb53d803bf36b8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/slider-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/slider-web-component/media_1b8526a38b83649408a8fd1aacce78e989e4baa33.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/carousel-web-component","title":"Carousel (Web Component)","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel allows users to browse through a set of items by swiping right or left.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_189ec55cc33a38db79298ec390fc7cb0a773d5be5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the ...","intro-desc":"A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/responsive-table/responsive-table-content-formatting-cheat-sheet/media_14e178a516a2d1718be8b1ad27b69e14ca2df7e4b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/barcode-scanning-mobile-integration","title":"Barcode Scanning","version":"","breadcrumbs":"UI Elements / Barcode Scanning","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12660ad81feb234819627cfb66e77bf30ea0159b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/side-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The side navigation component provides a vertical menu that lets users open applications or modules in your product. It can be implemented as an embedded ...","intro-desc":"The side navigation component provides a vertical menu that lets users open applications or modules in your product. It can be implemented as an embedded panel or as an overlay. In embedded mode, the navigation can be expanded or collapsed using the side navigation button. In overlay mode, the button opens the navigation as an overlay.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/side-navigation/media_1d7f6c64a9f87fc6da7d7982a867437f1e5f8c22f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bullet-chart","title":"Bullet Chart","version":"","breadcrumbs":"UI Elements / Bullet Chart","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1cc5fec57ea0c43b8e7a71543f50a1af71fcea905.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar-card/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected ...","intro-desc":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/calendar-card/media_1cf998dde09d9c7b19ba8439e201941eb05d3aae2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/user-menu","title":"User Menu","version":"","breadcrumbs":"UI Elements / User Menu","lastModified":1781346181,"designowner":"Core Design CAX","uielementstechnology":"Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented by an avatar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1911a1133ae10544952e19f5a3513f623c7ab9baa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/segmented-button","title":"Segmented Button","version":"","breadcrumbs":"UI Elements / Segmented Button","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A segmented button is a group of buttons that can be toggled.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1edd704fd080b48dbb11e1f35d0207e92cba1f12b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busy-indicator","title":"Busy Indicator","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12140d56a67df213284efad6144f66e287a977868.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/segmented-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A segmented button is a group of connected buttons that users can select. The group appears as a single component divided into multiple segments.","intro-desc":"A segmented button is a group of connected buttons that users can select. The group appears as a single component divided into multiple segments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/segmented-button/media_1a88004a6d5aae1cde06a0e34da2e4d0b82cbbd1f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/breadcrumbs-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set the separator style. The the following options are available:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/breadcrumbs-web-component/media_16001aad44c6e104ec8aebbe717b516617098db88.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toggle-button-web-component","title":"Toggle Button (Web Component)","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Avatar Group component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of ...","intro-desc":"AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of this pattern is to keep the user engaged and informed, manage their expectations, and show that the system is actively working.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/ai-progress-indicator/media_1027b816ced4a0f49b7a10e324d201c09f915865c.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bullet-micro-chart","title":"Bullet Micro Chart","version":"","breadcrumbs":"UI Elements / Bullet Micro Chart","lastModified":1781346181,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1fd50a6d5a303aee20c1b6b1c94d322edfec08d5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toggle-button-web-component/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/toggle-button-web-component/media_118a3da117f6c0c213a2861a13500d749aba0aac6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/upload-set-with-table-plugin","title":"Upload Set with Table Plugin","version":"","breadcrumbs":"UI Elements / Upload Set with Table Plugin","lastModified":1781346181,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Tables and Lists","elementstatus":"Available","description":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, or phone) to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1aba95cc469fc709d8ec6a13d11ba9c2a4338ec53.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-text-highlight","title":"AI Text Highlight","version":"","breadcrumbs":"UI Elements / AI Text Highlight","lastModified":1784931365,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.130.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busy-indicator-web-component","title":"Busy Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Busy Indicator","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy indicator informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_144e0e60e547a1eea3cd7ab091c4c723eeff13e8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/select/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select component, sometimes called a dropdown, lets users pick an item from a small, predefined list.","intro-desc":"The select component, sometimes called a dropdown, lets users pick an item from a small, predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/select/media_18fcac61b4ef2a3c48520e0b25e73402663d43539.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, ...","intro-desc":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/calendar/media_1c23e81058fb75bc8c8c934d35251d08b2efbfa7f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar-card","title":"Calendar Card","version":"","breadcrumbs":"UI Elements / Calendar Card","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1bbdcd191347ee54abec38aa31e1fba9534c28230.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/select-web-component/style","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/analytical-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) ...","intro-desc":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data. The analytical card is a single object card and does not contain a footer area. It can only be used in the overview page (OVP). In the resizable card layout, users can show more content/insights by resizing the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/analytical-card/media_1cf3b2a03c15829e3870762aff9ba6be554e78852.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Buttons let users trigger actions and come in various shapes and colors.","intro-desc":"Buttons let users trigger actions and come in various shapes and colors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/button-web-component/media_1d95dac4b50e81c8eb27e3ddd6a6963fce84e147f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/3d-viewport","title":"3D Viewport","version":"","breadcrumbs":"UI Elements / 3D Viewport","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ef16012ea1f674d09e22c5cd9335ff2be9657bbd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busy-state","title":"Busy State","version":"","breadcrumbs":"UI Elements / Busy State","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12944dfb4ac9ae58d254554cb58aa68896a191986.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/slider","title":"Slider","version":"","breadcrumbs":"UI Elements / Slider","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A slider is a component that enables the user to adjust single values within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_18610d3e6b2649bc92240c40bf39fb6813cd6d739.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar","title":"Calendar","version":"","breadcrumbs":"UI Elements / Calendar","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_138e7ca859952d8dc02250914913aef95008c79ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/barcode-scanning-mobile-integration/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app ...","intro-desc":"This section contains guidelines for the mobile integration of a barcode scanner API in SAP Fiori applications. The general approach for dealing with native app capabilities is to use native user interfaces triggered by an SAPUI5 control whenever possible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/barcode-scanning-mobile-integration/media_14cef05a5b3eeb84d3a1b7626a9f22a422dd3e54c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table toolbar always appears above the table. Use it for key actions that affect the entire table and for actions that apply to selected ...","intro-desc":"The table toolbar always appears above the table. Use it for key actions that affect the entire table and for actions that apply to selected items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/table-bar/media_18aa5b32c6e742756e67977ceab9317d1f3774ebe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/area-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range. These values are visualized ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/area-micro-chart/media_1a44ce4bcf73d12bad4a4de3494429e6b0416e2b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar-date-interval/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, ...","intro-desc":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the Previous and Next arrows), or by going directly to a specific month or year.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/calendar-date-interval/media_1e7d0554823734fa58c69f38f3dada666ed438f7d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/area-micro-chart","title":"Area Micro Chart","version":"","breadcrumbs":"UI Elements / Area Micro Chart","lastModified":1781346181,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"An area micro chart is a trend chart. It provides information for actual and target values for a specific time range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1a2776b92678b666305ec22ee6495187a29dcadfa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar-date-interval","title":"Calendar Date Interval","version":"","breadcrumbs":"UI Elements / Calendar Date Interval","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1bc01250da9e28c89f5dfae9b757509f5f45c1aa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/card-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or ...","intro-desc":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/card-web-component/media_174f7473dfd3d164352d5456678e4787ce65bda3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/carousel","title":"Carousel","version":"","breadcrumbs":"UI Elements / Carousel","lastModified":1784931365,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.Optionally, a paging indicator displays the user’s current position inside the set of items.The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. In a comparison scenario, it can also be useful to display several items side by side. The carousel is not limited to displaying images; it can contain any sap.m control.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_17f302169f29b6c6934b7fc891309ca7bbc3dd351.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/slider-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/analytical-card","title":"Analytical Card","version":"","breadcrumbs":"UI Elements / Analytical Card","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Data Visualization","elementstatus":"Available","description":"The analytical card is used for data visualization. It consists of two areas – a header area (either a standard header or a KPI header) and a chart area with a visual representation of the data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_162f7862c14ccd0084ae83c7f07a6b61f66146d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/shell-search","title":"Shell Search","version":"","breadcrumbs":"UI Elements / Shell Search","lastModified":1781346181,"designowner":"Core Design CAX","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The shell search in the shell bar helps users quickly find relevant information or resources.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_182a2aeec10140836e2839459d4c83e6ba084b0d1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/slider-web-component","title":"Slider (Web Component)","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"A slider enables the user to adjust a single value within a specified numerical range.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busydialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","intro-desc":"The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/busydialog/media_13aa5ff9f7de0c020ee6a30a41f3be54ff221703b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"","lastModified":1784931366,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.145.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/ai-text-highlight/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Based on user research insights and technical debt, we have de-prioritized development of the AI text highlight pattern.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/ai-text-highlight/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/shell-search/usage","title":"Info (information, internal_only)","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This component is relevant for the UX Consistency Product Standard UXC-025 – Shell Search.","intro-desc":"The shell search in the shell bar helps users quickly find information and resources across your product or product suite. It provides a unified experience with results from all connected systems, enabling users to locate objects from a single entry point.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/shell-search/media_117bcb087669b9b42acbf862d6ab5d04c89cf5f30.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busy-state/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","intro-desc":"You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/busy-state/media_16e30becd2841a8bbdbde30b01be18525b9b85a84.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/busydialog","title":"Busy Dialog","version":"","breadcrumbs":"UI Elements / Busy Dialog","lastModified":1781346181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The busy dialog informs the user about an ongoing operation.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ba2cdfdae15188129f99960e884d84b8d3866067.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/card-web-component","title":"Card (Web Component)","version":"","breadcrumbs":"UI Elements / Card","lastModified":1781346181,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"Cards are containers for different types of app content. They provide an entry-level view of the most pertinent app data for a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_196e031867ea1d948a13790c68d61e7a6f5e6fb91.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/carousel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346182,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed ...","intro-desc":"The carousel allows the user to browse through a set of items. It can display one or several items at a time. From the displayed item or items, the user can navigate to either the next or the previous item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/carousel/media_1dc2820fc95aafa66306509643071ad960bfab90f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calendar-web-component/usage","title":"Usage tab","version":"","breadcrumbs":"","lastModified":1784188875,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To change the month, the user can either use the previous/next arrows or select a specific month in the month view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/calendar-web-component/media_1e8e1bcd48e77ffd326c95b700bc25deb8fb37702.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/upload-set-with-table-plugin/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, ...","intro-desc":"The upload set with table plugin allows users to upload a single file, multiple files, or a directory of files from a device (desktop, tablet, or phone) to an SAP Fiori app.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/upload-set-with-table-plugin/media_1379fc67197900e632d5964ef3cb1ce582182e72a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bullet-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bullet chart is used to compare primary and secondary (comparison) values.","intro-desc":"The bullet chart is used to compare primary and secondary (comparison) values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/bullet-chart/media_1dd7215ee201a4115b41b6fdf27261cefe4b21765.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/calculation-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346181,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be ...","intro-desc":"The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/calculation-builder/media_18aec04f8fc16c780b640f8a9488996bc891d0b85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13a0d7279f03bd5e58608a4150ae7923e9f361b2f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-date-range-2","title":"Dynamic Date Range","version":"","breadcrumbs":"UI Elements / Dynamic Date Range","lastModified":1781346195,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_103a45bb17117ede0c45aeb1d8ba9a2a98637653c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-picker-popover","title":"Color Picker Popover","version":"","breadcrumbs":"UI Elements / Color Picker Popover","lastModified":1781346195,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker popover consists of a color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13c7fe1c6f602131dd3753778665612b1ca4f9f76.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-picker-web-component","title":"Color Picker (Web Component)","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b8387565e9db5f3a918e1bf2b37d3690f0eed203.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette-popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/combo-box-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-picker","title":"Color Picker","version":"","breadcrumbs":"UI Elements / Color Picker","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_179347d1e10a682fa8d77033bf3cc739d84d70cba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/column-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea ...","intro-desc":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings). The idea is to convey a progression or a trend, which is best represented by showing these values on the horizontal axis.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/column-chart/media_1fd9e1261fe0fa5b87da6a98e17a616ddc20fc8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dialog-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the ...","intro-desc":"The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the user for a response. While the dialog is open, the main screen is dimmed and blocked. A user action or confirmation is required to return to the main window.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/dialog-web-component/media_12283c89f3952026666f7cb671e0e1c9694cccfa2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/comparison-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it ...","intro-desc":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/comparison-micro-chart/media_11512ba95d7c0c6822e21326c68ebbe76202a2205.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-side-content-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. ...","intro-desc":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes. The side content appears in a container next to or directly below the main content. The width or height of the main content area adapts accordingly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/dynamic-side-content-web-component/media_1fe415f4bc8c1e172587b5990270b79f26caed549.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-picker-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/color-picker-popover/media_1a848c35dcc69fb71fb037a1ff2ab8d67c4815745.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-range-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782196781,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/date-range-picker-web-component/media_1f201b688c51f6104860ff9895b26d73cf2da5465.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-picker-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color picker allows users to choose any color and provides different input options for selecting colors.","intro-desc":"The color picker allows users to choose any color and provides different input options for selecting colors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/color-picker-web-component/media_15ce7daea92f929a841e24660412a7cb0f9eb6319.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1781346195,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1f45a654433704f22b1cc3c4445bc1e32bcae6f0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/delta-micro-chart","title":"Delta Micro Chart","version":"","breadcrumbs":"UI Elements / Delta Micro Chart","lastModified":1781346195,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_182d470d9c04ad4c692fb3425fea174ec7121dadb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1781346196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19b00a7268c49008465312bbdd7f022f276d1744e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dialog-web-component","title":"Dialog (Web Component)","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog component is a modal window that appears temporarily on top of the main screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1829e2306f4ef5a8f6c4cfd0877733e472dab4f05.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1781346195,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_15b5940e9ccdc4a95fc6dbc49d98d7374265caa52.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-range-picker-web-component","title":"Date Range Picker","version":"","breadcrumbs":"","lastModified":1782221739,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Date Range Selection component for SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/column-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, ...","intro-desc":"A column chart uses vertical bars to compare multiple values over time or across categories. One axis of the chart shows the categories being compared, the other axis represents a value. The bars of the column micro chart can represent both positive and negative values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/column-micro-chart/media_1b9da7d08da19cca893ed73e790c7c2223794e56a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/export-to-spreadsheet","title":"Export to Spreadsheet","version":"","breadcrumbs":"UI Elements / Export to Spreadsheet","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1d0c7baf79dfe68de232fee71adadc5fdacfea40c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/delta-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. ...","intro-desc":"The delta micro chart helps to visualize a delta value (difference) between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/delta-micro-chart/media_11d202839139b2d026bc0e12ec362caaa0d63a947.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/feedinput","title":"Feed and Notes","version":"","breadcrumbs":"UI Elements / Feed and Notes","lastModified":1781346196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1156501eac156b9caa0cc89aad0a9b588748fd382.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1781346195,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1783b91b6a84a7d5d57c3e89031aea4a4afd0d846.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/comparison-pattern/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple ...","intro-desc":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/comparison-pattern/media_1c240b529e72e2fa053c6626e59d9cc68e9fe8645.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/cloud-file-browser/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The cloud file browser is a tool that allows users to browse through a remote repository, export data to the cloud, or import files from ...","intro-desc":"The cloud file browser is a tool that allows users to browse through a remote repository, export data to the cloud, or import files from the cloud to an SAP application.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/cloud-file-browser/media_1b9c11ee4930035a8cbadb7cf376e0ce5e19b827a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1781346196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The footer toolbar always appears as floating footer at the bottom of the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b61edc791937c0ae99febdf9d511948b426886e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-side-content-web-component","title":"Dynamic Side Content (Web Component)","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The dynamic side content is a layout component that allows you to display additional content in a way that adapts flexibly to different screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1fcec572c6ad877326874f19607a45580445939f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-side-content/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Dynamic side content is a flexible layout container that enables the displays of additional contextual information alongside the main content. It adapts responsively to different ...","intro-desc":"Dynamic side content is a flexible layout container that enables the displays of additional contextual information alongside the main content. It adapts responsively to different screen sizes, automatically repositioning the side content on smaller devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/dynamic-side-content/media_153fbf7ccb2cdab975c8e44b27dce97f17f1549c1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/display-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/display-list-item/media_133b9d5f6374df618a2c60b0e091d9fde05205715.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/generic-tag/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The generic tag control displays complementary information, such as key performance indicators (KPIs) or status details, offering additional context without requiring users to leave the ...","intro-desc":"The generic tag control displays complementary information, such as key performance indicators (KPIs) or status details, offering additional context without requiring users to leave the current page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/generic-tag/media_1440a090182e73adf56f02fa48ed627a89993fa9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/combo-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combo box control allows users to select an item from a predefined list.","intro-desc":"The combo box control allows users to select an item from a predefined list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/combo-box/media_18b457f9616bd67c2dac48ec1574a056eab37a024.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/currency/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount ...","intro-desc":"Use this control to display different currencies in a vertical layout, such as in a table, list, or form. The control ensures that the amount is always aligned to the decimal point.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/currency/media_1ece18af9c509f14a837e4d29611141968ce5e46a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1a3fcf69b240cd88f53c23842a5864153296732d5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1781346196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1fae8da27aad67ed7955db99abd96bd9f35bb01ec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1781346195,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The display list item is the simplest list item. It shows content in the form of labels and text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_186ec1190b7154c9f5ddfccbd83b5845dccf4a15b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/harvey-ball-micro-chart","title":"Harvey Ball Micro Chart","version":"","breadcrumbs":"UI Elements / Harvey Ball Micro Chart","lastModified":1781346196,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"You can use a Harvey Ball chart to visualize a value compared to its total.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_183eca8645eed2c9346dbebb0e4fbe8d8809a6aec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/generic-mask-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in ...","intro-desc":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field. It allows users to easily enter data in a certain format and in a fixed-width input (such as a date, time, phone number, credit card number, currency, and IP address).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/generic-mask-input/media_14388e3decc745639a06b5268156b5a1a162ed78e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/html","title":"HTML","version":"","breadcrumbs":"UI Elements / HTML","lastModified":1781346196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_14c456ab3deee644191c408e18add0ad1fa3ac000.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/form-field-validation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","intro-desc":"This article describes data validation for fields in SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/form-field-validation/media_1a60823b6e3a8d75aaaf96487420c63fce7955bf1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1781346196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1030f9c1cc6ff4455afdf07bda192c4ec134f5a32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"You can use the color palette to let users choose a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_170e97efbb24e3d91c000971666bd2438e3218404.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/flag-and-favorite/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the ...","intro-desc":"You can let users flag objects for follow-up, or mark frequently-used objects as favorites. When an object is flagged or marked as a favorite, the corresponding object marker appears next to it:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/flag-and-favorite/media_165a342b5a1cd4e8caa1f2056ffea6b211160c6f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/checkbox-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette-popover-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover opens when the user clicks on a triggering text link or button.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/color-palette-popover-web-component/media_10191cf92cd4e123db7d7f4454b308c1f3f227276.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color palette with 15 colors and just one recent color","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/color-palette/media_12ae77a64ad0711d80f1329dc66dfa8895f089415.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette-popover-web-component","title":"Color Palette Popover (Web Component)","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1784931207,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette                     and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_186c4628f990e5b7cfaac7be42f16b2bc1c4d1c97.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/feedinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control ...","intro-desc":"Feeds and notes are commonplace in many SAP Fiori applications. The sap.m.FeedInput control allows users to input and post plain text, while the sap.m.FeedListItem control handles and displays this text. Both can be used individually, but they also complement each other well to create a simple feed or notes control.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/feedinput/media_11b7a529fcc4ef4db57e1f2259811def5acfc7da4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/checkbox-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox ...","intro-desc":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, Select All), it can also display an indeterminate state to indicate that not all subitems have been checked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/checkbox-web-component/media_1b474e3668604087733ed6b33665b1e6db9007cce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/cloud-file-browser","title":"Cloud File Browser","version":"","breadcrumbs":"UI Elements / Cloud File Browser","lastModified":1781346195,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"A tool for browsing through a remote repository, exporting data to the cloud, or importing files from the cloud to an SAP application.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_195c56544015c48b0afd7e7acb52ba10f34f03685.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/chart-toolbar","title":"Chart Toolbar","version":"","breadcrumbs":"UI Elements / Chart Toolbar","lastModified":1781346195,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"The chart toolbar acts as a container for charts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_18a36a9719a86c303f1843323f35c6c8a443d9d85.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1781346196,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"This article describes data validation for fields in SAP Fiori apps.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_11bbe74d231d95aecc7507ca0cfc4f85c21001e3d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/color-palette-popover/media_107f2bbe32647762877817cb0b250a23c3bd423e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1781346196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_114330825f5cacac149e43f26d9c8e3dfda4b9074.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/html/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise ...","intro-desc":"The HTML control allows you to display rich text or add freestyle HTML to your apps. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/html/media_19b84bf34545fee97d63137d2ec1147dc6fa299fc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/carousel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"1. Container: Holds the content, navigation buttons, and page indicator.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/carousel-web-component/media_1b6ba5c09ce59400edbded9b46613cd89b8738c7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1781346195,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1738feb6fb9c61d61d0f42e475828bb17c05bd22d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/header-toolbar","title":"Header Toolbar","version":"","breadcrumbs":"UI Elements / Header Toolbar","lastModified":1781346196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"The header toolbar always appears in the header of the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_14f56a0a4d67be0b2faa10138047632a1df3599a0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1781346196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_105f34094ca4e49d64a41b767a5312b77a0a4454e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/expandable-text","title":"Expandable Text","version":"","breadcrumbs":"UI Elements / Expandable Text","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The expandable text control provides access to truncated text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19da90aea5c0800469aca7446ff67a75c5b7a0546.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/header-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible ...","intro-desc":"The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/header-toolbar/media_16211bc4d4ad8145a4c8bbb2e6676c81d00b3112a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1781346196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The formatted text control displays HTML text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_175c8d1ac8959dcad08aed2fa30b24381ec485baf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/form-web-component","title":"Form","version":"","breadcrumbs":"UI Elements / Form","lastModified":1781346196,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_195664e6fa3161129883a37f3373984f6896a9fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette-web-component","title":"Color Palette (Web Component)","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette allows users to select a color from a predefined set of colors.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b963258a5dc30a06a8d187913f277268297518ce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/icon-web-component","title":"Icon","version":"","breadcrumbs":"UI Elements / Icon","lastModified":1781346196,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An icon is a symbol that is used to depict an item, action, or status.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_101ade000781b80020958a803fe0d07356407187d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/checkbox-web-component","title":"Checkbox (Web Component)","version":"","breadcrumbs":"UI Elements / Checkbox","lastModified":1784931207,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A checkbox allows users to set a binary value to “true” or “false”, indicating whether or not an item has been chosen. If a checkbox acts as a parent for a group of checkboxes (for example, Select All), it can also display an indeterminate state to indicate that not all subitems have been checked.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1989bcdd8ccfed4800b7f5e26baaf8e26bc5a2f72.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich ...","intro-desc":"Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/chart/media_1d42b59311324fe832a3f346f96b1f9e920b62380.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/color-picker/media_1b078aaf0dc5403af74c988e35c55cb41c0a2cc5c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/icon-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector ...","intro-desc":"An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector graphic. Icons can be purely decorative or used within interactive elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/icon-web-component/media_15f2cdd9e19a7723a5f438468581130b546cd16c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1781346195,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age, ranges, or ratings).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13a32b33a122f287d7b9204d52bf397e892607e23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/formatted-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"By default, the control uses the standard font and headlines. It supports the following HTML tags:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/formatted-text/media_1ad302b9081d3eac381c9202963c8e33714f082fa.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/column-micro-chart","title":"Column Micro Chart","version":"","breadcrumbs":"UI Elements / Column Micro Chart","lastModified":1781346195,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A column chart uses vertical bars to compare multiple values over time or across categories.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_11f6a274117b6d9dc755eae1e8a3e1446901d9fe2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dialog control (sap.m.Dialog) pauses the current app flow to collect a response or decision from the user. It requires explicit input – such as ...","intro-desc":"The dialog control (sap.m.Dialog) pauses the current app flow to collect a response or decision from the user. It requires explicit input – such as confirmation, cancellation, or data entry – before proceeding.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/dialog/media_1bfac893cc7d441a4bcf48049811930c6153ca430.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The combobox allows users to select an item from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/combo-box-web-component/media_15f323bedbd4fb3b49e6069ba6d707385c047232e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette-popover","title":"Color Palette Popover","version":"","breadcrumbs":"UI Elements / Color Palette Popover","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The color palette popover encapsulates the color palette and the color picker within a popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1621603f391a48740d8bcdff89298faec6a0465a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1781346196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The mask input control (sap.m.MaskInput) governs what a user is permitted to enter in an input field.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1841027ebc68fc036150da6af1fa82b2788b3fc59.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/expandable-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The expandable text component lets users view longer pieces of content without taking up too much space in the layout. It shows a short preview ...","intro-desc":"The expandable text component lets users view longer pieces of content without taking up too much space in the layout. It shows a short preview of the text by default, with a Show More link to reveal the full content and a Show Less link to collapse it again. Depending on the design, the text can expand inline or open in a popover.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/expandable-text/media_1ae4d6b6bfff4bbb09015027a27bf9f24a3e54743.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/form-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A form is used to present data to the user and to allow users to enter data in a structured way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/form-web-component/media_1c45a296e899647574badbae920e0efaee31bdd23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1781346195,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The dialog control interrupts the current app process to prompt the user for information or for a response.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ee2c8e5005dff65020d1ca8a4d53896a65ac71ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/export-to-spreadsheet/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet ...","intro-desc":"“Export to Spreadsheet” is a utility for exporting data from an app to a spreadsheet, enabling users to work with the data in common spreadsheet applications. Typical use cases are to mix the data with other sources, perform complex calculations, or change the layout of the data (for example, to present the content differently).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/export-to-spreadsheet/media_1304a2eca1d0416daeab79b76cfeff61031a58336.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/chart-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in ...","intro-desc":"The chart toolbar acts as a container for charts.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/chart-toolbar/media_1d836296792fd447472804da0faa5f1369713c4da.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/illustrated-message","title":"Illustrated Message","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1781346196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10c52bf91052b0bdf2cf1b308e60106cd1c9ce34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/illustrated-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The illustrated message combines a solution-oriented message, an engaging illustration, and a conversational tone. It communicates specific use cases, like an empty state, more effectively ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/illustrated-message/media_1c278e871809df761fe9caaea7c5022cacf586c64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-date-range-2/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","intro-desc":"The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/dynamic-date-range-2/media_129e4349aa26ec0008952dcdf3d21650e74e780f5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/combo-box-web-component","title":"Combobox","version":"","breadcrumbs":"UI Elements / Combobox","lastModified":1784931207,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The combobox allows users to select an item from a                     predefined list.It provides an editable input field for filtering the                     list, and a dropdown menu with a list of the available                     options.If the entries are not validated by the application, users can also enter a custom value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1863898b42aa89dd33616aa2ed9ac4b6c978a4a63.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/footer-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, ...","intro-desc":"The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/footer-toolbar/media_12a3f22e888af82d7f02d0156be07146fe923ea87.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/harvey-ball-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or ...","intro-desc":"You can use a Harvey Ball chart to visualize a value compared to its total. This is not a pie chart with multiple values or sections, but rather just one value from a total. If you configure thresholds, the semantic color of the value shows a positive, critical, or negative value. You can also use regular chart colors from the qualitative palette without a semantic meaning.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/harvey-ball-micro-chart/media_1ab294462195e8cbc2a2a3a336fc5df519c5dfb25.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/gantt-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the ...","intro-desc":"The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/gantt-chart/media_182607306f0ec9c8750541a3ff9cd5c21c5bc4a94.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/color-palette-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346195,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/color-palette-web-component/media_108e91c2d13bbfcc04158b01cceeeef88afdd7851.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/group-feed-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the group feed component to offer a social timeline that is integrated with SAP Jam. The group feed enables SAP Jam users ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/group-feed-component/media_168ec97aa1813dc871f84414be2e1e2831ce31834.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/form/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346196,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general design guidelines for all forms. The guidelines also apply for smart forms.","intro-desc":"A form is used to present data to the user and to allow users to enter data in a structured way.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/form/media_1d63a4170d01a5c0934425974c4c1e1e0075d3323.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1781346211,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart is a basic type of chart used in many fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_147798bba89b3fe1e37430c72b21055f5bcbcf9d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-combo-box-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/invisible-message","title":"Invisible Message","version":"","breadcrumbs":"UI Elements / Invisible Message","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_14a3c5c0bc8753912d2074dbfde1ad4dcbf2cd201.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/menu-web-component","title":"Menu","version":"","breadcrumbs":"UI Elements / Menu","lastModified":1781346211,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"A menu offers the user a list of alternative actions.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_103eced6af0f058e1487e66134701ce58cee3ddca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The input list item contains a label and any sort of input UI element.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1dd84db7bd2232638934317981c6d19e64a6bb1a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/process-flow","title":"Process Flow","version":"","breadcrumbs":"UI Elements / Process Flow","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_148bbea2921a2dd5eb5077ecc04a31d9b19571a0c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/placeholder-loading","title":"Placeholder Loading","version":"","breadcrumbs":"UI Elements / Placeholder Loading","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13ff7a7333591b85daf8ee2da6a139aa03869bad3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/label-web-component","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name assigned to a component or a group of related components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13ed5f048894e958511019a767a02838878ba396d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/progress-indicator-web-component","title":"Progress Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_17e6ba61edbf193ed04336491e337a5bada4ead16.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/object-display-elements","title":"Object Display Components","version":"","breadcrumbs":"UI Elements / Object Display Components","lastModified":1784931365,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is                     connected to an object and displays a certain type of                     information (status, identifier, number, marker).                     Object status: a short text that represents the semantic status of an object                     Object identifier: a short text that represents the key identifier of an object                     Object number: a short text that represents the numeric                     (key) attribute of an object and its unit                     Object marker: indicates the technical status of an object","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_18ce6628526fd1b32f6e1210ae065d3a1041925f4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/output-management","title":"Output Management","version":"","breadcrumbs":"UI Elements / Output Management","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1308ff2e008d827dc3f9613229ccd4eae3089d227.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/invisible-text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/invisible-text/media_1bb653aeb0da45903951b29fa321db56586b9f21c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10c2d58e75892d7e9223fb88abc14732a9453d8ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/line-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a ...","intro-desc":"A line chart is a basic type of chart used in many fields. It displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/line-micro-chart/media_102514c983a54041c2327d64722d3b301ac798bee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/input-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In input list items, only the labels become truncated if the text is too long for the space available.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/input-list-item/media_1eaaeaa0a5452a278606c9e19135caa52112785c7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/illustrated-message-web-component","title":"Illustrated Message (Web Component)","version":"","breadcrumbs":"UI Elements / Illustrated Message","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10c52bf91052b0bdf2cf1b308e60106cd1c9ce34f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Images are a powerful way to capture the user’s attention and to communicate your message.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c1947e8a30a55713f2de6da6fe9cdd85b1b4c457.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1352664a5084983747b5609d3cda788f940c73ea5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business ...","intro-desc":"Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/micro-chart/media_135126c4446480f0d6139c38850655552b155fb70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-bar-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/interactive-bar-chart/media_1f211dc6f266b5a822c6e4af2cc9f255a15e25796.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-donut-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/interactive-donut-chart/media_10c8876040cce436535875ba3019bee29e997dfb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/lightbox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the ...","intro-desc":"The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/lightbox/media_1b90785d7cd883c0b78b64033924ec34fe0ac3166.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/menu-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"The menu button offers a set of options for an action, displayed in a menu.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/menu-button-web-component/media_1c966c9452be8146755b335b0c6687624f8d190b2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/quickview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/quickview/media_1c26630b4d844c4a3a3b964ac55788481a644a054.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/label/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A label is the name or title of a control or group of related controls.","intro-desc":"A label is the name or title of a control or group of related controls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/label/media_12f37a1f0727c0a66a68e60accfa41338cb80493b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1781346211,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"A line chart displays information as a series of data points connected by straight lines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1251a3f18277cb1bb37937c6ddea9c9433196f917.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-line-chart","title":"Interactive Line Chart","version":"","breadcrumbs":"UI Elements / Interactive Line Chart","lastModified":1781346211,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1f366d0285bdc5d68c436d9f31e9702d96dd2a954.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/menu-button-web-component","title":"Menu Button","version":"","breadcrumbs":"UI Elements / Menu Button","lastModified":1781346211,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The menu button offers a set of options for an action, displayed in a menu.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13b91d73d155d88c40a26edd0891c4afef71d0383.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_16e9417153a166a3be8bfd2a01e54b77741d165c1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/infobar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","intro-desc":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/infobar/media_1ba75fd9c7d23b91ad5f00a6e5de73ed8dbcf1b28.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/label","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1781346211,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A label is the name or title of a control or group of related controls.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_15482e6f32cb7f70d431fe6e413e60efa9e253b76.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/panel-web-component","title":"Panel (Web Component)","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a responsive container for grouping and displaying information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_172b4b37fcba7f99a215c3dc44e8c7946f6ad05ee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/maps/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP ...","intro-desc":"Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes. SAP Visual Business supports analytic maps and geographic maps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/maps/media_15a40a5bbc700937d026f62475f1ce2ead015ff26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-input-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/list-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML ...","intro-desc":"You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML content. List items can also be grouped.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/list-web-component/media_1a204d9a8fca716d3fbc7d183780d2e75872b4fcf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1a477f1876ea7e5a8c26784ea518c4425da486fcc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-bar-chart","title":"Interactive Bar Chart","version":"","breadcrumbs":"UI Elements / Interactive Bar Chart","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_114c632d3b0d722e02ed493f1eed765e4fe76988a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1781346211,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message popover control can display multiple messages of different types in one list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1849174013612670c0b8b16a03847af7dc2356b67.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-box/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can ...","intro-desc":"The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/message-box/media_1b39c8ebfd2c67de27b26b91bdc4da871f745def0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/label-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Label: The default label comes without the optional “Required” indicator. The user can continue without providing input in the corresponding component or components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/label-web-component/media_1cfbcd62d868069e193cd0ed23c485b499ec665cb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1781346211,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The message box is a special dialog for displaying different message types.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_182eb6d2097c8fdd6c8a9c97026b4e1ce2db9a87c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/list-web-component","title":"List (Web Component)","version":"","breadcrumbs":"UI Elements / List","lastModified":1781346211,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the list component to display different types of list item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_125cc6b829ac88a371e64cde7c087b0fb71963c5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-input-web-component","title":"Multi Input","version":"","breadcrumbs":"UI Elements / Multi Input","lastModified":1784931366,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi input allows the user to enter multiple values, which are displayed as tokens.To help the user enter a valid value, you can enable the suggestions feature and the value help option.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ea3fc44de0baf8200706c9349d6c6f839c5567ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-toast","title":"Message Toast","version":"","breadcrumbs":"UI Elements / Message Toast","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_15d758db1c89b4953237f2f55a966d2f78040443b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/micro-process-flow","title":"Micro Process Flow","version":"","breadcrumbs":"UI Elements / Micro Process Flow","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The micro process flow control enables you to visualize the state of individual items in a linear workflow.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c530f345e6e900993a80d02969a54f9136c4eeec.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/lightbox","title":"Lightbox","version":"","breadcrumbs":"UI Elements / Lightbox","lastModified":1781346211,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The lightbox control allows the user to view an image in its original size.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b817e010750d4bb627cfae49c13209dc2fa37185.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/list-overview","title":"List","version":"","breadcrumbs":"UI Elements / List","lastModified":1781346211,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1fcd497fc61431596c51cf3e00e571b90c96ec9db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-combo-box-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi combobox component enables users to select options from a predefined list or enter a custom text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/multi-combo-box-web-component/media_1ab2ebb975588b55c0ae570df14b02881ca7339e4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/invisible-message/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users ...","intro-desc":"The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/invisible-message/media_18eac0c5b4fddcdd03feeccd307d69481b64d77d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page ...","intro-desc":"The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/interactive-line-chart/media_1c264951696f0a9e7f652472d8e7260d8780c0f73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-combobox/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-combo box lets users select one or more options from a predefined list. It includes an editable input for filtering and a dropdown with ...","intro-desc":"The multi-combo box lets users select one or more options from a predefined list. It includes an editable input for filtering and a dropdown with checkboxes for multi-selection.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/multi-combobox/media_13b0df4bef0d13335da8031790ed77147d534f643.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/interactive-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to ...","intro-desc":"The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/interactive-chart/media_12354bef8b812b81a4be777dea3c0885167fe5bab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-view","title":"Message View","version":"","breadcrumbs":"UI Elements / Message View","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"You can use the message view to display messages that are not related to form or table fields.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12a366b8ef7d44069b2048311d125007d6432e50e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/line-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common ...","intro-desc":"A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/line-chart/media_1953af858dd184ad6385822ba32554390b99fb831.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/quickview","title":"Quick View","version":"","breadcrumbs":"UI Elements / Quick View","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Display and Messaging","elementstatus":"Available","description":"The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_17925cf8eeb172d5cbdcbac33f52abb13026865ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/list-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in ...","intro-desc":"In SAP Fiori, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, whereas the data in tables tends to be more complex. Lists are mostly used in list-detail scenarios using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/list-overview/media_1ef80ad5c401cc1a9a3087b9603655d51637101fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/illustrated-message-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346211,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"An illustrated message includes a set of five UX illustrations per use case: large (L), medium (M), small (S), extra small (XS), and base. Each ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/illustrated-message-web-component/media_17910771d548c327d6bad6ec15492a9867f14c623.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi input allows the user to enter multiple values, which are displayed as tokens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/multi-input-web-component/media_180f153e02a3558b2a41ba9dee20f5d0f574ea9f6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/pdf-viewer","title":"PDF Viewer","version":"","breadcrumbs":"UI Elements / PDF Viewer","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The PDF viewer control displays PDF documents within your app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_18508a09693bcfba47b087c386f6a44fad7f1e6f0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/pdf-viewer/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open ...","intro-desc":"The PDF viewer control displays PDF documents within your app. It can be embedded in your page layout, or you can set it to open in a popup dialog. In addition, this control allows you to print and download the PDF documents it displays.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/pdf-viewer/media_1bfa25b86afee6191679c8e74904e96c327bba1db.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-popover/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/message-popover/media_13fdba32a3548ad4a64980691267ecabacade7d6c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/object-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object list item’s text sizes are limited due to truncation. The title wraps once and truncates after two lines. The key attribute also truncates ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/object-list-item/media_1f45470c7866e6bf8083da18bf1c214a3a08ea800.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/progress-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator lets you use a value state to convey semantic meaning.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/progress-indicator-web-component/media_1765ecfd6e380f478c39d36ef6716709c27f27098.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/image/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into ...","intro-desc":"Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image control to integrate images into your apps for dedicated purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/image/media_16451af95fa2d40b83226fc5eb72c93be6114bf58.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/menu-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visualization of the menu item adapts automatically, depending on which elements are included.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/menu-web-component/media_1a7657263f98d294c5fb1048cd30d3189d2f598e2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/maps","title":"Map","version":"","breadcrumbs":"UI Elements / Map","lastModified":1781346211,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Maps are used to visualize data in an easy and intuitive way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1bd45f01886edbff640b5961a41aad9e142fb5e64.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments ...","intro-desc":"The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/planning-calendar/media_1d029dd975301f7ba3629ef3938c58002575c9e7e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/output-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control ...","intro-desc":"The output control is a “reusable component”, which means that it can be used as a building block, also for SAP Fiori Elements. The control allows the user to manage the output process of a business document (such as sales orders or billing documents). It gives the user the possibility to evaluate the output history for a specific business document – including the state of an output process – and interact with it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/output-management/media_147f032d680639911c698dfb0a49783e2d38b6027.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/radio-button","title":"Radio Button","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Radio buttons provide users with a set of mutually exclusive options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12fd7df1828ad35aaa68bf92a08c68c5c19dd1dba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-combo-box-web-component","title":"Multi Combobox","version":"","breadcrumbs":"UI Elements / Multi Combobox","lastModified":1784931366,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi combobox component enables users to select                     options from a predefined list or enter a custom text.It provides an editable input field to filter the list and a dropdown arrow to open the list of available                     options. The select options in the list have checkboxes                     that permit multiple selection.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_11d7c9a37954b54fe035b6055d89edbc7f42925c4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/object-display-elements/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There are four types of object display component: object status, object identifier, object number, and object marker. Each one is connected to an object and ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/object-display-elements/media_1d5e293aa90a85990cd3e79fbc23bdae9e037287e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/progress-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The progress indicator shows how far a process has progressed or been completed. A horizontal bar filled with color represents the level of completion, and ...","intro-desc":"The progress indicator shows how far a process has progressed or been completed. A horizontal bar filled with color represents the level of completion, and the value is displayed on top of the bar as either an absolute number or a percentage.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/progress-indicator/media_1844020badd3e55dac7d6c2a244e259dd5cacb36e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/radio-button/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/radio-button/media_13f43fbead2716b11c1a0dd9432dfaf5d2b8d880f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/panel-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you ...","intro-desc":"The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you can make the content area collapsible.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/panel-web-component/media_11356a4925593d71f3b9b6bd6cfbba9467589b6ae.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/radial-micro-chart","title":"Radial Micro Chart","version":"","breadcrumbs":"UI Elements / Radial Micro Chart","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The goal of the radial chart is to display a single percentage value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19624546162ab9e6a768a141d5a784da4da746a15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/panel","title":"Panel","version":"","breadcrumbs":"UI Elements / Panel","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"The panel is a container for grouping and displaying information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1328f040cd295dab29537f328b03b7cc5ce6bd3bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1781346212,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The network graph displays a large amount of data by highlighting the relationships between individual records.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12ad6602c273072dd5cdbb74dfeb21a9f50f77284.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/planning-calendar","title":"Planning Calendar","version":"","breadcrumbs":"UI Elements / Planning Calendar","lastModified":1781346212,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The planning calendar allows users to see different appointments at the same time and to create new appointments.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1cfbb18f53b08a0e79b04761ee93283e7f4bf4aeb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_15d0a2711e410acb655b7ab56d12cd27621b4ee05.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/progress-indicator","title":"Progress Indicator","version":"","breadcrumbs":"UI Elements / Progress Indicator","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The progress indicator visualizes the current advancement of a process or a degree of accomplishment.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1d0ddb97dab143a0fb0cc254e84062a11ff513418.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multiinput/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A multi-input field allows users to enter and manage multiple values displayed as tokens within a single input area.","intro-desc":"A multi-input field allows users to enter and manage multiple values displayed as tokens within a single input area.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/multiinput/media_173f3d16993db12dabd14d2eec5a7b5aaf9d6e154.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/panel/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","intro-desc":"The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/panel/media_1bdc7737232c3a7163f742ccee16854d7232335d4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/placeholder-loading/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. ...","intro-desc":"Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/placeholder-loading/media_13175ff2e20060d41ef72d9cee92b3f257f4ad589.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/network-graph/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show ...","intro-desc":"The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/network-graph/media_18882555808350a74e3dbcc86d32a9d5901ddd3f0.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The multi-combo box control is commonly used to enable users to select one or more options from a predefined list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1843b1bab04ade10920de61d2103a186a3f2e0a19.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/radio-button-web-component","title":"Radio Button (Web Component)","version":"","breadcrumbs":"UI Elements / Radio Button","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Radio buttons provide users with a set of mutually exclusive options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1212c79c9968d644ce5d9a6ab1218fe882b2bd57d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/radial-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The goal of the radial chart is to display a single percentage value. The chart consists of a colored radial bar with a percentage value ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/radial-micro-chart/media_1357a7cd9b53b3481c5e3b8592cf9b3e99b194f5a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-view/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to ...","intro-desc":"You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/message-view/media_1297823960caa449a4bd588d12ddce9a83d802ff8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous ...","intro-desc":"The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/process-flow/media_1b3b1b8be78eb186eac11e2b1d70bdf40ae708923.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/object-list-item","title":"Object List Item","version":"","breadcrumbs":"UI Elements / Object List Item","lastModified":1781346212,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The object list item offers a quick overview of an object within a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19130d01c71644aa45c352045c67add76abc36139.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1781346212,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A multi-input field allows the user to enter multiple values, which are displayed as tokens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b9fda93defa03fcc8c6a58f69ae8f741b6a385ba.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/micro-process-flow/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The default steps can be replaced by other controls. The following controls are supported:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/micro-process-flow/media_16ad4ea12ff054ea17f03587aa63bf439f3633207.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-toast/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346212,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","intro-desc":"A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/message-toast/media_12b1d48b56e49a6eba9e17d00186b1def5051124b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/scroll-container","title":"Scroll Container","version":"","breadcrumbs":"UI Elements / Scroll Container","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The scroll container is an empty area that can be filled with content, such as other UI elements.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1677cba63b54be6c3a43c17e4ba9898a47c5d5d81.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/split-button-web-component","title":"Split Button","version":"","breadcrumbs":"UI Elements / Split Button","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1dd4c322684ec2b73b2a0e2d36dad4c40ddfe1d0a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-table","title":"Smart Table","version":"","breadcrumbs":"UI Elements / Smart Table","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1e2db12d88fdcc1e7275a64d5a2f5594720e19b0f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rules-builder","title":"Rule Builder","version":"","breadcrumbs":"UI Elements / Rule Builder","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12e258a67c000175487319931f96b94a3e26c6c44.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rich-text-editor","title":"Rich Text Editor","version":"","breadcrumbs":"UI Elements / Rich Text Editor","lastModified":1781346229,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rich text editor (RTE) is a complex control for data input and editing.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_155931ae82bd21814c697d788961052c6725983c2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/search","title":"Search","version":"","breadcrumbs":"UI Elements / Search","lastModified":1781346229,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"A search is a means of accessing information quickly.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1eed5318d4abc4417f7da320fd154933a3cabc32e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/single-planning-calendar","title":"Single Planning Calendar","version":"","breadcrumbs":"UI Elements / Single Planning Calendar","lastModified":1781346229,"designowner":"SuccessFactors","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_15d03de686686ea38ad63b4fc4a0f38ce3d83ae7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-field","title":"Smart Field","version":"","breadcrumbs":"UI Elements / Smart Field","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c75b9c0b9c0391ea939818c29ce80bbe89d4d5f7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/step-input","title":"Step Input","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input control allows the user to change the input values in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_19a00fd65720aeef4af884eb7c87396f9db874966.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-chart","title":"Smart Chart","version":"","breadcrumbs":"UI Elements / Smart Chart","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1e7f235e196376a51ab0a23cf7e4a063595f2d79e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rules-builder/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rule builder is the technical representation of a simple business rule for a specific a business case.","intro-desc":"The rule builder is the technical representation of a simple business rule for a specific a business case.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/rules-builder/media_1d9ed78f0ef3cfb61ffb78dbc755fe70a6e44959c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-chart/usage","title":"Info (warning)","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline was written for release 1.52 and is no longer updated. For the latest design guidelines on charts, see Chart (VizFrame) and Chart Toolbar.","intro-desc":"The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/smart-chart/media_1d283b165c7b4b9a31955c9d77df0a9f779c2a6f9.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/search/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use a search field (sap.m.SearchField) if you want to enable users to enter text to search for information. The search field is also the control ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/search/media_173c464bcffb8da1ceed059355bddeceb7346eae8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and ...","intro-desc":"The select dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field to filter the list.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/select-dialog/media_151d474f12215db531d4813d312889e5dd488b289.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-form/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for ...","intro-desc":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account. The smart form also provides a toolbar with a title.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/smart-form/media_148f43ae8402e44ccb124c8141019c1cb70ae4d9c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/side-panel","title":"Side Panel","version":"","breadcrumbs":"UI Elements / Side Panel","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1e49a42204dc153ede9feca6a39032fa2996f9f20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/standard-list-item","title":"Standard List Item","version":"","breadcrumbs":"UI Elements / Standard List Item","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"The standard list item is a type of list item used in simple lists.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1b649afd30de67e5b9d03f2368a7764aea00a7b7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-list","title":"Smart List","version":"","breadcrumbs":"UI Elements / Smart List","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"You can use the smart list control to create lists or trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10c86fc4fb24df8abc6b8ae9e96bf01d40b75f3a2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/standard-list-item/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard list item is used in simple lists to display a single data point (title) or dataset, such as a product name with a ...","intro-desc":"The standard list item is used in simple lists to display a single data point (title) or dataset, such as a product name with a few attributes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/standard-list-item/media_1963eab28add4a5b354d4f2cd0f73a01277669909.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1781346229,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1282a8ef01d40759c30fa1958f45188c487939ee6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tab-bar-web-component","title":"Tab Bar","version":"","breadcrumbs":"UI Elements / Tab Bar","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"The tab bar comprises a series of tabs that each link to a different content area or view.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1af41fd7083a8ceb5d740b8b3b42b0f95084d2c56.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-form","title":"Smart Form","version":"","breadcrumbs":"UI Elements / Smart Form","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"The smart form control creates a form. If used with smart fields, the smart form provides both read-only and editable views, and OData annotations for the smart fields are taken into account.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1d8bcedde2787a5b6485ad6c6b7e695b079bcc424.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/scroll-container/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","intro-desc":"The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/scroll-container/media_1685d43a2e70460d15841eee27d8a56c3ad9d4b3f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/status-indicator","title":"Status Indicator","version":"","breadcrumbs":"UI Elements / Status Indicator","lastModified":1781346229,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Display and Messaging","elementstatus":"Available","description":"The status indicator uses a filled shape to visualize a single value.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1663e65d59dfd02c24490da956914b4522dd554bf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/stacked-bar-micro-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values ...","intro-desc":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole. These values can be displayed in two different ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/stacked-bar-micro-chart/media_1f6e1797ce8f968c47f0a4352e9acde73b4c4c4f2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/status-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The status indicator provides four different sizes: small (size S), medium (size M), large (size L), and extra-large (size XL).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/status-indicator/media_1204bd3d1e927fceef6f0f4c80ec470ebbd23a39d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A table contains a set of data that is structured in rows and columns.","intro-desc":"A table contains a set of data that is structured in rows and columns.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/table-web-component/media_16aa7ce44bff38a270edb7dd91c79828f68b97401.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/split-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions ...","intro-desc":"The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/split-button-web-component/media_1894b0af2e0e0f089961ebc124d8bf1f885a28453.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/step-input-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"The step input component allows the user to change the input value in predefined increments (steps).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/step-input-web-component/media_10f2c203045f97335f4234b5b21a761b33466290e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-web-component","title":"Table","version":"","breadcrumbs":"UI Elements / Table","lastModified":1781346229,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A table contains a set of data that is structured in rows and columns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1fb8fdebd5be14599939bdca8babae49a27f8ed21.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rich-text-editor/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types ...","intro-desc":"The rich text editor (RTE) is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text, such as images and hyperlinks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/rich-text-editor/media_1cf597db92b8fea0a2472ba77f283803cce6c2a27.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-link/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and ...","intro-desc":"Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.\nThe smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/smart-link/media_1fc9217782813e0c2c8c06bfd76d6a37237929542.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tile","title":"Tile","version":"","breadcrumbs":"UI Elements / Tile","lastModified":1781346229,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_14ce0f38b209a709f302d9bdee6a74c581cc38210.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text-area-web-component","title":"Text Area (Web Component)","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1d364a69ecf7428981beed3951da5428973b51469.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/t-account/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often ...","intro-desc":"In double-entry bookkeeping, journal entries are transferred to the general ledger by posting their debit and credit amounts on specific ledger accounts, which are often referred to as T accounts. A ledger account (or T account) is usually displayed in a format that resembles the letter T: with the account name above the T, debit entries to the left of the T, and credit entries to the right of the T.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/t-account/media_1ccbaadae1bac820e07a14d6c01adbc357033d172.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-select-dialog","title":"Table Select Dialog","version":"","breadcrumbs":"UI Elements / Table Select Dialog","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_16fcc0b87006a0c1975d98b046fddb0b094ed7200.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/translation-of-textual-user-input","title":"Translatable User Input","version":"","breadcrumbs":"UI Elements / Translatable User Input","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_17414c3b4e763744cc278b944766d61e29eb3147e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-personalization-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","intro-desc":"The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines the column order and visibility.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/table-personalization-dialog/media_1c7b4b60cb1988ecc718fe3a83fc476697cc1dbee.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-select-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, ...","intro-desc":"Table select is a commonly-used dialog that helps users to make a selection from a comprehensive table containing multiple attributes or values. With the dialog, users are also able to access additional information about the objects in the table without needing to select them first.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/table-select-dialog/media_1429c80d6a6fc0224079b28b3d48696966ec64bea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toast-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/toast-web-component/media_172f6817aaa27ae3ea595e6302864c5122b62c5bb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toast-web-component","title":"Toast","version":"","breadcrumbs":"UI Elements / Toast","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A toast is a small, non-disruptive popup for a non-semantic success message that disappears automatically after a few seconds.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_126afd6aea18f53541857d918e3b33e8d214c0243.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rating-indicator","title":"Rating Indicator","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1a76a049d32baf29704965e3c476de5a7018f1a55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rating-indicator-web-component","title":"Rating Indicator (Web Component)","version":"","breadcrumbs":"UI Elements / Rating Indicator","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The rating indicator can be used to rate content or to indicate a rating.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_16de02282256dc080f171841e7168771a3eb16302.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/time-picker-web-component/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","intro-desc":"The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/time-picker-web-component/media_1c2eb3f1954a95e27ea462a94757df40738214dff.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text-area/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input control that lets users enter multiple lines of text in a single field.","intro-desc":"The text area is an input control that lets users enter multiple lines of text in a single field.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/text-area/media_133713cda04d6f67236b714ba0124b961f28ae445.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/time-picker","title":"Time Picker","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_176417f4ec2d05547ee8c9a4ea667508b28edaad1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. ...","intro-desc":"The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/smart-table/media_15a3d63fb7b794f9c62f68538c7cf4329b3c06339.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text-area","title":"Text Area","version":"","breadcrumbs":"UI Elements / Text Area","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The text area is an input control that allows the user to enter several lines of text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_129686b427d649f08260937a7966e1b6aaafbba89.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/table-personalization-dialog","title":"Table Personalization Dialog","version":"","breadcrumbs":"UI Elements / Table Personalization Dialog","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The table personalization dialog allows you to display and modify table settings.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_114a6b3b3b51a554cbda796ac9090b3daff280b42.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text control is used to display text within an application. It can appear in forms, tables, and content areas to present information. Its properties ...","intro-desc":"The text control is used to display text within an application. It can appear in forms, tables, and content areas to present information. Its properties include wrapping, truncation, and localization to ensure optimal display across devices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/text/media_1b990fcb7d9cad7109c49b09952af9a0466f4cf23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rating-indicator/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/rating-indicator/media_1724e262e70ee94a5a5df04e2596525fabbd01139.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/title-web-component","title":"Title (Web Component)","version":"","breadcrumbs":"UI Elements / Title","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title is a simple, large-sized text containing additional semantic information about the header level for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10564776b4ef6e844b7cc839d5e9897081a7986c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tag-web-component","title":"Tag","version":"","breadcrumbs":"UI Elements / Tag","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"A tag provides additional information about an object, such as a number or KPI.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_17abbacb5227bda343fd2a47f5698792ec61ddb41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/step-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The step input component allows users to adjust numeric values in predefined increments (steps) using either buttons or direct input. It’s particularly useful when users ...","intro-desc":"The step input component allows users to adjust numeric values in predefined increments (steps) using either buttons or direct input. It’s particularly useful when users need to quickly change values like quantities or measurements without manually typing every number. The component supports both keyboard and mouse interactions, and it can be customized with minimum, maximum, and step values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/step-input/media_153cc2f7dae57cfad670c7c0a2715b6c39a3c1763.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/step-input-web-component","title":"Step Input (Web Component)","version":"","breadcrumbs":"UI Elements / Step Input","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The step input component allows the user to change the input value in predefined increments (steps).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c60bcc829ce26730d055d33f669332182894e007.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/select-dialog","title":"Select Dialog","version":"","breadcrumbs":"UI Elements / Select Dialog","lastModified":1781346229,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The select dialog enables users to select one or more items from a comprehensive list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_11267a0a454f16fe9e5723e0e4620135e385b2fb5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-list/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the smart list control to create lists or trees.","intro-desc":"You can use the smart list control to create lists or trees.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/smart-list/media_1b94ab65835677a74e9c0e573b679b916946adf82.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/timeline/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/timeline/media_1dcd077da9d47cc6a44b0bc14850766113aaff1fd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/title/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/title/media_1150a96d93b5d339277efc23ab7a6e74867a9f0e5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/stacked-bar-micro-chart","title":"Stacked Bar Micro Chart","version":"","breadcrumbs":"UI Elements / Stacked Bar Micro Chart","lastModified":1781346229,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the single values as part of a whole.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1f59afd21ab46ecdfcf201b3ae090098a9e5e1145.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/time-picker-web-component","title":"Time Picker (Web Component)","version":"","breadcrumbs":"UI Elements / Time Picker","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The time picker allows the user to select a localized time.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_121e56bea8e93d377b3c03d223241b2304a7f0c9f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/time-picker/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The time picker lets users select a localized time using touch, mouse, or keyboard input in 12-hour or 24-hour format. Users can either type a ...","intro-desc":"The time picker lets users select a localized time using touch, mouse, or keyboard input in 12-hour or 24-hour format. Users can either type a time directly or use the visual clock face to choose hours, minutes and seconds.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/time-picker/media_1a7734e5468a06b299b6918506c51fd43b1e21578.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text-web-component/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the text component to display a given text.","intro-desc":"You can use the text component to display a given text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/text-web-component/media_161286b2e75853e8cb28af1007dc0ca94250b63b7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toolbar-overview/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data ...","intro-desc":"The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/toolbar-overview/media_10a55f77e8bf4167b477ce68e6a8ef7d2b29b2a8e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ecebc4042f2d61a0559c9555c96d823509d2e0cf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/timeline","title":"Timeline","version":"","breadcrumbs":"UI Elements / Timeline","lastModified":1781346229,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"The timeline control shows entries (such as objects, events, or posts) in chronological order.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1e0b0a5091fbff4f273225dc595265ca715948290.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/single-planning-calendar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. ...","intro-desc":"The single planning calendar is a scheduling control that displays the calendar of a single person or resource over a day, work week, or week. Users can view appointments, create new appointments, and delete appointments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/single-planning-calendar/media_138330fed23841f66ba8e2a21aef216490a306641.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tab-bar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to ...","intro-desc":"The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/tab-bar-web-component/media_1c2cdf8b858b40dbdf35043a1cefb22346c1291d2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text-web-component","title":"Text (Web Component)","version":"","breadcrumbs":"UI Elements / Text","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Component","elementstatus":"Available","description":"You can use the text component to display a given text.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_187a5069fa7724cafd7ee160b19ffb50bada6e6b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-field/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes ...","intro-desc":"The smart field creates different user input controls and their read-only equivalents based on an OData (Open Data Protocol) service and its annotations. It comes with additional built-in features, such as autocomplete and suggestions, value help dialog, recently used and recommended values, validation, and message handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/smart-field/media_13982ddaf16d568b28f5fbf53dd98b2079035ecbe.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text","title":"Text","version":"","breadcrumbs":"UI Elements / Text","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The text control is used to display text. It generally contains the text that developers want apps to display (property: text).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_16b27ce80f23ccd8053d8d77f08fe17e79f4a98c0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/smart-link","title":"Smart Link","version":"","breadcrumbs":"UI Elements / Smart Link","lastModified":1781346229,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"Like the quick view, the smart link triggers a popover from a text link.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1f73ea6ce3a305e7f68b028062563fe520fc8844c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toolbar-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"A toolbar is a flexible container that can hold various other components.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/toolbar-web-component/media_15e3fbed46b86cc85fea60e1cfd906261a2b99cfd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/token","title":"Token","version":"","breadcrumbs":"UI Elements / Token","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ad23c3a5cbb074522c5c375e1c10be81fbd75ec2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tag-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tag provides additional information about an object, such as a number or a KPI (Key Performance Indicator). It directs the user’s attention to specific ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/tag-web-component/media_1475fdf622d3b1064b36d82694496c72b7fd95166.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/text-area-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The text area is an input component that allows the user to enter several lines of text.","intro-desc":"The text area is an input component that allows the user to enter several lines of text.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/text-area-web-component/media_156f6803910810902246a6842ef5e51c5aff5c943.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/side-panel/usage","title":"usage","version":"","breadcrumbs":"","lastModified":1781353683,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without ...","intro-desc":"The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page. It can easily be expanded and collapsed, depending on the user’s needs.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/side-panel/media_12ab0765a3bd29b6815fdf9a3d04cae3e71c07382.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/token/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the ...","intro-desc":"Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/token/media_14fbab56aa299c216ee66f06c2c3471ec8dc18d1c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/title-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/radio-button-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each ...","intro-desc":"Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each option is represented by a radio button.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/radio-button-web-component/media_11caa85173e10d1c8a2d4f1838ed460ddea510eea.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Within SAP Fiori, we distinguish between tree tables and trees.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_149cfbba7d4c0c1b70b9ce962c576c8113ee7c05d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toolbar-web-component","title":"Toolbar","version":"","breadcrumbs":"UI Elements / Toolbar","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"A toolbar is a flexible container that can hold various other components.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12998514bcca1c31bceb43a812ebcbba3d43a8b15.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/rating-indicator-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346229,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. ...","intro-desc":"The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/rating-indicator-web-component/media_140e678084c6e75ea2a1697020d05df22d86a805c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1784931207,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_15b0422b7e582e1ddc7ce9908fbc1b3e41c7e8b79.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/translation-of-textual-user-input/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In order to fulfill international business needs, business objects may need to support textual input to be translatable into several languages. The use cases for ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/translation-of-textual-user-input/media_19826614d2de03b2d74ad812c26c5b0af122e6fca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. ...","intro-desc":"Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the main list for a list-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/tree/media_1c428ab6c8f9d62ace9804f3fc9ddddd74cff713d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/toolbar-overview","title":"Toolbar Overview","version":"","breadcrumbs":"UI Elements / Toolbar Overview","lastModified":1781346229,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"The toolbar enables the user to change the UI or trigger an action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_10a808cf53bde211261c8c6463b34a9e3046cd93e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tile/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tile is a container that represents an app on the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/tile/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/support","title":"Support","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/snapping-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The snapping header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/snapping-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/variant-management","title":"Views (Variant Management)","version":"","breadcrumbs":"UI Elements / Views (Variant Management)","lastModified":1781346241,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"Variants store view settings, such as filter settings or control parameters.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_14e7e41f0812546a10deac89d05634542f274200c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/view-settings-dialog","title":"View Settings Dialog","version":"","breadcrumbs":"UI Elements / View Settings Dialog","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_13f39637d12f06bde03f1956901baae0f5e3f9626.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1781346241,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1eb21be323538926dcef62f479733bea61f9ce2ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-date-range","title":"Dynamic Date","version":"","breadcrumbs":"","lastModified":1784931365,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.108.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/contextual-filter/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Filtering options are now covered by the filter bar and table toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/contextual-filter/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/community/contact-us","title":"Ask the Community","version":"","breadcrumbs":"Community / Ask the Community","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use the internal SAP Fiori Design Community to ask design questions and post your design ideas.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/community/media_13c25ff067ae3b807935ff2fb430a5de2c12f1c02.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/upload-set","title":"Upload Set","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/support/core-design-services/support-process","title":"Support Process Overview","version":"","breadcrumbs":"Support / Core Design Services / Support Process Overview","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use the graph below for more details of the steps we follow.","intro-desc":"Our support process covers three main areas:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/support/core-design-services/media_1c41fa26804982ec5c75062c873e70066d89b44f8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/web-card-system-badge/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can use badges to display important information about the card status, such as New, Updated, or :pushpin-off: (pinned).","intro-desc":"You can use badges to display important information about the card status, such as New, Updated, or :icon-pushpin-off(pinned).","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/web-card-system-badge/media_1efa721b45464dcc9ce355f3da76358765321e1e8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/treemap-chart","title":"Treemap Chart","version":"","breadcrumbs":"UI Elements / Treemap Chart","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Treemaps are used to display hierarchical data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1e4c5702f9e6851a9883582de19aa25283536350f.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/master-list","title":"Master List","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to select the list items to be displayed in the details area of a split-screen layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/waterfall-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by ...","intro-desc":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/waterfall-chart/media_1d444588a5bc8f29e93b49618ebd274d1a48745ab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree-web-component/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The standard tree item (ui5-tree-item) is the simplest type of tree item. It provides the most common features, such as text, icon, and a checkbox ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/tree-web-component/media_1e84246a9cefa11c380bf84b2449fe823993f4684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/card-header/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as ...","intro-desc":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as the title, subtitle, and status of the card.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/card-header/media_10cfa5421640afe1e7676179dc683fd2f36a5262a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bar","title":"Bar","version":"","breadcrumbs":"UI Elements / Bar","lastModified":1782211781,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"The bar is a container used to hold titles, subtitles, buttons, and input elements.  It typically appears at the top of a screen or section to provide access to navigation, actions, and key content.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_114a2a43fa510fef63eab89ca727cf660141eefbd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/waterfall-chart","title":"Cumulation (Waterfall Chart)","version":"","breadcrumbs":"UI Elements / Cumulation (Waterfall Chart)","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"Waterfall charts are used to analyze a cumulative value. They show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c4986b1d8a01b6f9f2e3a70e2b2bb5022b6e297c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/p13n-dialog/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the new P13n Dialog page below for the most recent updates.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/p13n-dialog/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media-in-web-card-system","title":"Media in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Media in the Web Card System","lastModified":1781346241,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"Using images on a card or banner.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media_1e5dc29cbf2543dc15090c40a374f131dbd88b504.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-page","title":"Message Page","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Message pages give feedback to the user when an app or list is empty, or when an error has occurred.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media-in-web-card-system/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The media block feature enables cards to spotlight special content for the user. Media blocks are usually used in two ways:","intro-desc":"The media block feature enables cards to spotlight special content for the user. Media blocks are usually used in two ways:","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media-in-web-card-system/media_1e672eb3ec52a5095b14b595060548fc7171dc234.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/dynamic-date-range/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"There’s now a dedicated dynamic date range component with a new guideline page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/dynamic-date-range/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/upload-collection","title":"Upload Collection","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Allows users to upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/object-header/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object header is now covered by the dynamic page layout and object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/object-header/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/menu-button/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The individual button guidelines have been consolidated in one button guideline.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/menu-button/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/snapping-header","title":"Object Page – Snapping Header","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Web UI Kit represents the visual appearance of the component. Design characteristics such as color, metrics and general states can be directly inspected. ...","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/upload-collection/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload collection component has been replaced by the new upload set component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/upload-collection/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/contextual-filter","title":"Contextual Filter","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/message-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The message page component has been replaced by the illustrated message component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/message-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/wizard/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346242,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard ...","intro-desc":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full screen mode and in a modal dialog. Beyond that, the wizard in full screen mode can also be used in a flexible column layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/wizard/media_1dbf1c997b206d1453cc9a04b32c515252d4439a4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/community","title":"Community","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree-toolbar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","intro-desc":"The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/tree-toolbar/media_12073c022978cfe0a3087cb53b94eefa5791f0283.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/variant-management/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"On the user interface, we now call variants “views”, which is better understood by end users. To describe the SAPUI5 controls, however, we still speak ...","intro-desc":"Variants store view settings, such as filter settings or control parameters.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/variant-management/media_16e7eb31b3d9c6b01aa2f8f3e07f13e4a7f492129.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/card-header","title":"Card Header in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Card Header in the Web Card System","lastModified":1784931366,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"The card header contains essential information about the card and its associated detail page. It provides a quick overview of the basic attributes, such as the title, subtitle, and status of the card.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media_18d73d71c7de6fa8676e98cf8244e9f333e34188a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/p13n-dialog","title":"P13n Dialog","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"The P13n dialog control tabs allow users to personalize table and smart chart attributes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system","title":"Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System","lastModified":1784931365,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most pertinent information or a teaser pointing to more details on a given topic or issue.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ad6b4e026cdc404382cbb27505b8561ded4d054b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/value-help-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","intro-desc":"The value help dialog is a UI pattern that helps the user search and select single and multiple values. The user can also define conditions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/value-help-dialog/media_1fd34221a75309df9689cb0b23e9f9ca8a59fbd70.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/support/core-design-services","title":"Core Design Services","version":"","breadcrumbs":"Support / Core Design Services","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with the processes for requesting new features, handling support tickets, and asking for design advice.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/support/media_118f2112aec2fee7578b80cf6b18e5d716c969941.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/support/core-design-services/supported-components","title":"Supported Components","version":"","breadcrumbs":"Support / Core Design Services / Supported Components","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components ...","intro-desc":"In Core Design Services, we aim to provide the best possible support for the commonly used components in the SAP design system. These are components that we expect to be used broadly across all SAP products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/support/core-design-services/media_118f2112aec2fee7578b80cf6b18e5d716c969941.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1781346241,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12e09112c19ba4784967fe7bb481697096d7b70af.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1784931365,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most ...","intro-desc":"Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most pertinent information or a teaser pointing to more details on a given topic or issue.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media_105df4cee503fd76b26953bcd408f2b7051e0d522.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/community/newsletter","title":"Stay Up-To-Date","version":"","breadcrumbs":"Community / Stay Up-To-Date","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Keep abreast of the developments in the SAP Design System by subscribing to our newsletter and joining the update calls.","intro-desc":"Keep abreast of the developments in the SAP Design System by subscribing to our newsletter and joining the update calls.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/community/media_141684e845354cacc67ee5c97fb8dd348f2819d33.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/support/core-design-services/innersource","title":"InnerSource for Web","version":"","breadcrumbs":"Support / Core Design Services / InnerSource for Web","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The InnerSource process for the SAP Design System ensures that all design teams can jointly evolve the design of our product portfolio. Supporting close-to market ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/support/core-design-services/media_1e5ed4a5ff225f8ff5b05c3bf22b6fbd16e900690.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/web-card-system-badge","title":"Badge in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Badge in the Web Card System","lastModified":1781346241,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Target Design","description":"You can use badges to display information about the card status, such as new, updated, or pinned.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media_17577c3126506c9d4255dafd83169c8a05da73766.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/master-list/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The master list is now part of the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/master-list/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/web-card-system-card-navigation","title":"Card Navigation in the Web Card System","version":"","breadcrumbs":"UI Elements / Web Card System / Card Navigation in the Web Card System","lastModified":1781346241,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Target Design","description":"Outlines how to select the right card navigation pattern, based on card complexity and group consistency.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/value-help-dialog","title":"Value Help Dialog","version":"","breadcrumbs":"UI Elements / Value Help Dialog","lastModified":1781346241,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The value help dialog is a UI pattern that helps the user search and select single and multiple values.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_12284cb2338dfed809608068b2a99b22967e99d2e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/upload-set/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The upload set component has been replaced by the new upload set with table component.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/upload-set/media_185115ae441ee05dbe93fce6239aa1c34088d95d7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree-toolbar","title":"Tree Toolbar","version":"","breadcrumbs":"UI Elements / Tree Toolbar","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action; Table, List, Tree","elementstatus":"Available","description":"The tree toolbar always appears above a tree or tree table.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1302bccd8ab0bdfec92c883967bc0485805987389.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/treemap-chart/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data ...","intro-desc":"Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category. Treemaps are economical in that they can be used within a limited space and yet display a large number of items simultaneously. Treemaps allow you to view trends and make comparisons quickly.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/treemap-chart/media_1f3805fe7c9043deea0280e4d12a19bd782cfc617.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree-web-component","title":"Tree (Web Component)","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1781346241,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"Trees provide a way to display and work with basic hierarchical data.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1ff9aabb633a5ec35d6e25203d30c8b4c35bae981.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/support/core-design-services/core-design-services","title":"Core Design Services – Overview","version":"","breadcrumbs":"Support / Core Design Services / Core Design Services – Overview","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The article serves as a resource for SAP Fiori web design support, offering guidance on components, design foundations, and feature requests.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/support/core-design-services/media_11b19cd480dd12def8f9a27c053bae207078145b3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/view-settings-dialog/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons ...","intro-desc":"The view settings dialog helps users to sort, filter, or group data within a list or a table. The dialog is triggered by icon buttons in the table toolbar.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/view-settings-dialog/media_18ac0065e367d3ffa15c71931aba77594965c8a3a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The bar is a container used to hold titles, subtitles, buttons, and input elements. It typically appears at the top of a screen or section ...","intro-desc":"The bar is a container used to hold titles, subtitles, buttons, and input elements. It typically appears at the top of a screen or section to provide access to navigation, actions, and key content.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/bar/media_1391c94fc6130e15777cb0ba7eb21cd1752b9bd50.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/web-card-system-card-navigation/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cards typically serve as previews, offering users a glimpse of more detailed information and functionality. To facilitate navigation, users can interact with the card itself.","intro-desc":"Cards typically serve as previews, offering users a glimpse of more detailed information and functionality. To facilitate navigation, users can interact with the card itself.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/web-card-system/web-card-system-card-navigation/media_1f8643650913e34f14e48aa09be8c6a7abbd86889.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/visual-filter-bar/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the ...","intro-desc":"The visual filter bar offers a unique way of filtering large datasets through visualizations. This helps users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/visual-filter-bar/media_18aca500d03f7c65b77c3d319cb939cffd19390a5.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/tree-table/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1781346242,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) ...","intro-desc":"A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item.","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/tree-table/media_12c2920fb57e11f0b4a2d61dda3a3659f389b340b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/object-header","title":"Object Header","version":"","breadcrumbs":"","lastModified":1781346241,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"An object header is the first element on a page for a single object (object view or flat object view).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c81651b1681e376178db768e85d5e04ab7177e8d.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/resources/libraries/design-stencils-for-figma","title":"SAP S/4HANA Web UI Kit","version":"","breadcrumbs":"Resources / UI Kits / SAP S/4HANA Web UI Kit","lastModified":1781706860,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP S/4HANA Web UI Kit for Figma helps designers quickly prototype SAP Fiori for Web applications using the Morning Horizon theme, with elements for conceptual design.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/resources/libraries/media_1300dea86199038d609d7b3b08d3af2714fe96d26.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1782138790,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"The date range selection component enables users to enter start and end dates by typing in or selecting dates in the calendar popover.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-148/ui-elements/media_1c7d1fa41fa91d1321fbd4b65c0046b25f2712515.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-148/ui-elements/date-range-selection/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782132028,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The date range selection is a UI component used to enter a date range by typing two dates in the input field or selecting a ...","intro-desc":"The date range selection is a UI component used to enter a date range by typing two dates in the input field or selecting a date range in the calendar. In specific scenarios, it also supports a single date entry.","image":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/object-page","title":"Object Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Object Page Floorplan","lastModified":1782336672,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/list-report","title":"List Report","version":"","breadcrumbs":"","lastModified":1782336672,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The list report floorplan allows the user to work with a large, filterable list of items and take action.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/smart-template-list-report","title":"List Report (Smart Template / SAP Fiori Element)","version":"","breadcrumbs":"","lastModified":1782336672,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/object-view","title":"Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782336672,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The object view is a floorplan for displaying objects (predecessor to the object page floorplan).","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1782336673,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/flat-object-view","title":"Flat Object View Floorplan","version":"","breadcrumbs":"","lastModified":1782336672,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"The flat object view floorplan displays all the information for an object on one long scrollable page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/ux-writing/overview-page-ui-text-guidelines","title":"Overview Page – UI Text Guidelines","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Overview Page – UI Text Guidelines","lastModified":1782336678,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The sections below describe the guidelines for each of these texts.","intro-desc":"Texts for the overview page include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/ux-writing/media_122cdf2acd8337076473f13aab345c05df1ede071.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/ux-writing","title":"UX Writing","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing","lastModified":1782336677,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Write consistent page and card titles, subtitles, and action texts in overview pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/ux-writing/wrapping-and-truncating-text","title":"Wrapping and Truncating Text","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / Wrapping and Truncating Text","lastModified":1782336677,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the ...","intro-desc":"Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls make use of wrapping and/or truncation. This article provides an overview of best practices.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/ux-writing/media_1d419f1924f835e221e06091f91571998b352d747.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1782336677,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/typography/typography","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography","lastModified":1782336678,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplan-overview","title":"Overview – Layouts, Floorplans, and Frameworks","version":"","breadcrumbs":"Page Types / Overview – Layouts, Floorplans, and Frameworks","lastModified":1782336678,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori has a simple user interface hierarchy, designed to make the user interaction easy and intuitive. In general, the SAP Fiori launchpad is the ...","intro-desc":"SAP Fiori has a simple user interface hierarchy, designed to make the user interaction easy and intuitive. In general, the SAP Fiori launchpad is the main entry point. All the apps available to a user are presented as tiles in the app finder, while the home page shows a personalized view of tiles the user has selected. The shell bar offers an enterprise search and other services, which are available across all apps.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/media_1404ed4030c22a147a130cabb3c677ac8aced0c12.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/ux-writing/ui-text-space-matrix","title":"UI Text Space Calculator","version":"","breadcrumbs":"Foundations / Writing and Wording / UX Writing / UI Text Space Calculator","lastModified":1782336679,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the ...","intro-desc":"The UI text space calculator is a small app that tells you how much extra space you need to allow for translation, based on the length of your original source text. (English or German).","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/foundations/writing-and-wording/ux-writing/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/writing-and-wording","title":"writing-and-wording","version":"","breadcrumbs":"","lastModified":1782336697,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/foundations/visual/typography","title":"typography","version":"","breadcrumbs":"","lastModified":1782336697,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp","title":"overview-page-ovp","version":"","breadcrumbs":"","lastModified":1782336698,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards","title":"cards","version":"","breadcrumbs":"","lastModified":1782336698,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans","title":"floorplans","version":"","breadcrumbs":"","lastModified":1782336698,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts","title":"page-layouts","version":"","breadcrumbs":"","lastModified":1782336698,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types","title":"page-types","version":"","breadcrumbs":"","lastModified":1782336699,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/analytical-list-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336702,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/analytical-list-page/media_100242be137cd2209e94d9ad3109134494d30fc61.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/dynamic-page-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336702,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use ...","intro-desc":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/dynamic-page-layout/media_1940b506ed5a37e52805a5201e4bc39923e392cda.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/multi-instance-handling-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336701,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.","intro-desc":"The multi-instance layout allows the user to display and edit multiple objects within one page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/multi-instance-handling-floorplan/media_160f9aa8b157b53358b5ba41370d30d02d39fdeb3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/flexible-column-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336703,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple ...","intro-desc":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/flexible-column-layout/media_169f3cc9a6d0487f8595cd7d6eaada3c45a19b41d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/object-page/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1782336706,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general guidelines for the object page floorplan. Note that some features may not be available if you are using the SAP Fiori ...","intro-desc":"The object page floorplan allows the user to display, create, or edit an object. This is the recommended floorplan for representing both simple and complex objects in SAP Fiori. The object page floorplan comes with a flexible header, a choice of anchor or tab navigation, and a flexible, responsive layout. These features make it adaptable for a wide range of use cases.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/object-page/media_163942c9dd7e9a3102e990e5afb3882ccad095733.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/work-list/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1782336705,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general guidelines for the worklist floorplan. Note that some features may not be available if you are using the SAP Fiori elements ...","intro-desc":"A worklist displays a collection of items that a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/work-list/media_159c19ed86b35d987c509f6e9f9b4c0a86e432772.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/create-page/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336704,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Creating pages is now covered by the best practice guidelines for object handling.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/create-page/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336704,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336705,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"List cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar ...","intro-desc":"Lists with Different Flavors","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards/media_19dae5546ee097bd20ec8112dffc72b37b7e88287.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336705,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 ...","intro-desc":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card/media_1ac4602c707a49ca57137ad2e4968389b3e407a7b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336705,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card ...","intro-desc":"Adaption of standard cards","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards/media_19fb37ced7333a42274b1bc8915cbfed7a046975a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336706,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"As well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This ...","intro-desc":"Take Action on the Overview Page","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card/media_111c6ce1e1577f42c93beda6db6c9fb5427184372.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/overview-page-card/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336706,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Each task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/overview-page-card/media_131dabdf0dfcb36a4fba27a03d9791a8773875eef.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336706,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The resizable card layout is a layout for the . It enables users to define a personalized card layout by changing not only the position ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336707,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout/media_173f728a2e69fa938ed97f2485e481d8797b5d91a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/smart-template-list-report/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336706,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The two list report pages (freestyle and SAP Fiori elements) have been merged into one article.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/smart-template-list-report/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/initial-page-floorplan/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336708,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is ...","intro-desc":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/initial-page-floorplan/media_18accd21d30a76f979dbcb4221b039446fa6d1798.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/list-report-floorplan-sap-fiori-element/usage","title":"Info (information)","version":"","breadcrumbs":"","lastModified":1782336708,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article contains general guidelines for the list report floorplan. Note that some features may not be available if you are using the SAP Fiori ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/list-report-floorplan-sap-fiori-element/media_173bb1ea449965ba698931a78c73ab276b000cc5b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/flat-object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336707,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/flat-object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/object-view/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336707,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The object view floorplan has been replaced by the object page floorplan.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/object-view/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336709,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page/media_1f84367ccc20ddf2a8de9303ddb246c94201e3d8d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/split-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336708,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The split screen layout was replaced by the flexible column layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/split-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/full-screen/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336708,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The full screen layout was replaced by the dynamic page layout.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/full-screen/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/grid-layout/usage","title":"This page has been deprecated and is no longer available.","version":"","breadcrumbs":"","lastModified":1782336708,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The content is now covered by the pages for content density and multi-device support.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/grid-layout/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/semantic-page/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336710,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The semantic page is recommended for freestyle applications. By predefining where elements such as titles, global actions, and finalizing actions are placed, the semantic page ...","intro-desc":"The semantic page is recommended for freestyle applications. By predefining where elements such as titles, global actions, and finalizing actions are placed, the semantic page helps designers and developers to implement and comply with the SAP Fiori Design Guidelines more easily. Based on the dynamic page and possessing its functionalities, the semantic page also adds semantic meaning to specific elements on the page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/semantic-page/media_19f01838d076612f0de52b20642aac93d54d36fe4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/letter-boxing/usage","title":"Intro","version":"","breadcrumbs":"","lastModified":1782336709,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, ...","intro-desc":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/letter-boxing/media_1b9793eb36bcd37dcb7e0f6f6875f012c4604a06c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/work-list","title":"Worklist Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Worklist Floorplan","lastModified":1782336765,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"A worklist displays a collection of items that a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.The focus of the worklist floorplan is on processing the items. This differs from the list report floorplan, which focuses on finding and acting on relevant items from a large dataset.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1782336766,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-list-cards","title":"Overview Page – List Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – List Card","lastModified":1782336766,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Lists with Different FlavorsList cards display a set of items or links in a list format. The overview page supports three types of list card: list card, bar chart list card, and link list card. You can also icons and images. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-table-card","title":"Overview Page – Table Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Table Card","lastModified":1782336766,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Table cards are a type of object group card, and display a set of items in a table format. Table cards use the responsive SAPUI5 control sap.m.Table. For general information on cards, see Cards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-stack-card-quick-view-card","title":"Overview Page – Stack Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Stack Card","lastModified":1782336766,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Take Action on the Overview PageAs well as giving users access to content from multiple applications using different visualizations, the overview page can also let users take immediate action. This is supported by a special interaction pattern with a set of closely-integrated card types: the stack card, object stream, and quick view card. These three card types are only ever used together, and navigation between them has been optimized to best support user needs.A stack card is a collection of quick view cards, which provide a footer area with actions. These quick view cards are displayed in the object stream (overlay). The advantage of using stack cards is that users don’t have to leave the overview page, and therefore don’t lost their focus.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/overview-page-custom-cards","title":"Overview Page – Custom Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Cards / Overview Page – Custom Card","lastModified":1782336766,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Adaption of standard cardsCustom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card content area. They offer additional flexibility when you require features that are not offered by the standard cards for overview pages.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/cards/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/resizable-card-layout-overview-page","title":"Overview Page – Resizable Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Resizable Card Layout","lastModified":1782336767,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"The resizable card layout is a layout for the . It                     enables users to define a personalized card layout by                     changing not only the position of a card, but also its                     size, and thus how the card content is presented.This layout gives users much greater flexibility in                     tailoring the overview page to their specific business                     needs. And it allows app teams to offer varying levels of                     detail for any given card. Whenever the size of a card                     changes, the content adapts automatically to show the                     most relevant information in the available space.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/overview-page-fixed-card-layout","title":"Overview Page – Fixed Card Layout","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Fixed Card Layout","lastModified":1782336767,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Self-Contained CardsThe fixed card layout is a layout for the overview page. It comes with predefined card characteristics that support automatic, easy and fast card design. The cards have a fixed width, and the height is determined by the card type and the embedded control.The cards are ordered in responsive and collapsible columns. The number of columns is also fixed to keep the focus on the middle of the screen and show the set of cards in a compact display (a kind of                     letterboxing). For more information, see Responsiveness.The fixed card layout is one of two layout options for the overview page. The other is the resizable card layout.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/overview-page-card","title":"Overview Page – Card","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (OVP) / Overview Page – Card","lastModified":1782336767,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"Cards – Harmonized and Powerful InformationEach task or topic on an overview page is represented by a card. The overview page acts as a UI framework for organizing multiple cards for one role on a single page .Cards are containers for app content, and represent an entry-level view of the most pertinent app data for a given topic or issue. Technically, a card is a smart component that uses UI annotations to render its content. Cards allow you to show application content from different                     sources side by side – without requiring the user to switch screens. Cards differ in the content they display: They can show a chart, a list, a table, informative text, or a combination of two elements. However, cards never have editable fields.Cards can focus on a single object or topic, or on a group of objects. Cards can also vary in size, depending on the selected layout.The overview page can contain several cards that reference the same (parent) application. However, each card must bring added value to the user, and not just repeat information already offered on another card.Before you start designing cards for an overview page, see the best practices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page-ovp/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/list-report-floorplan-sap-fiori-element","title":"List Report Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / List Report Floorplan","lastModified":1782336767,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"List reportWith a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/analytical-list-page","title":"Analytical List Page (SAP Fiori Element)","version":"","breadcrumbs":"Page Types / Floorplans / Analytical List Page (SAP Fiori Element)","lastModified":1782336767,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"Analytical list pageThe analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, and to act on transactional content. All this can be done seamlessly within one page. The purpose of the analytical list page is to identify interesting areas within datasets or significant single instances using data visualization and business intelligence.Visualizations help users to recognize facts and situations, and reduce the number of interaction steps needed to gain insights or to identify significant single instances. Chart visualization increases the joy of use, and enables users to spot relevant data more quickly.The main target group are users who work on transactional content. They benefit from fully transparent business object data and direct access to business actions. In addition, they have access to analytical views and functions without having to switch between systems. These include KPIs, a visual filter where filter values are enriched by measures and visualizations, and a combined table/chart view with drill-in capabilities (hybrid view). Users can interact with the chart to dig deep into the data. The visualization enables them to identify spikes, deviations and abnormalities more quickly, and to take appropriate action right away.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/initial-page-floorplan","title":"Initial Page Floorplan","version":"","breadcrumbs":"Page Types / Floorplans / Initial Page Floorplan","lastModified":1782336767,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/floorplans/overview-page","title":"Overview Page (SAP Fiori Element)","version":"","breadcrumbs":"Page Types / Floorplans / Overview Page (SAP Fiori Element)","lastModified":1782336768,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, and view, filter, and react to information quickly.Each task or topic is represented by a card (or content container). The overview page acts as a UI framework for organizing multiple cards on a single page.The overview page is based on SAP Fiori elements                     technology, and uses annotated views of app data, meaning that the app content can be tailored to the domain or role. Different types of card allow you to visualize                     information in an attractive and efficient way.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/floorplans/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/split-screen","title":"Split-Screen Layout","version":"","breadcrumbs":"","lastModified":1782336768,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1782336768,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.71.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/semantic-page","title":"Dynamic Page Layout – Semantic Page","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout – Semantic Page","lastModified":1782336768,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is recommended for freestyle applications. By predefining where elements such as titles, global actions, and finalizing actions are placed, the semantic page helps designers and developers to implement and comply with the SAP Fiori Design Guidelines more easily. Based on the dynamic page and possessing its functionalities, the semantic page also adds semantic meaning to specific elements on the page.Semantic page layout","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782336768,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout control designed to support various floorplans and use cases. As a result, the content of both the header and the page can vary. Depending on your use case, you can either use one of the predefined floorplans or create your own layout.The header of the dynamic page (1) is collapsible, which helps users to focus on the actual page content (2), while ensuring that important header information and actions are readily available. The dynamic page also includes an optional footer toolbar (3) for closing or finalizing actions that impact the whole page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782336768,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout allows the user to display and edit multiple objects within one page.Beforehand, the user selects the objects from another page, usually a list report or a table. Each object then appears on a separate tab.As a result, the user can work on several objects simultaneously and switch between them easily.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout (Layout + SAP Fiori Elements)","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout (Layout + SAP Fiori Elements)","lastModified":1782336768,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782336768,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-71/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/sap-copilot","title":"Explainable AI","version":"","breadcrumbs":"","lastModified":1782337311,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The former SAP CoPilot has been replaced by SAP’s new AI copilot, Joule.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1782337311,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/tile-catalog","title":"Tile Catalog","version":"","breadcrumbs":"","lastModified":1782337311,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The features are now covered by the app finder in the SAP Fiori launchpad.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Forward / Forward","lastModified":1782337311,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you ...","intro-desc":"You can forward an object to another user for further investigation. The object will be forwarded to the recipient’s worklist. Depending on the context, you can forward one or several objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_15638fe19ef863496cb353f926e41feaab9026da2.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-my-home","title":"SAP Fiori Launchpad “My Home”","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad “My Home”","lastModified":1782337313,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a ...","intro-desc":"The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_153f77eff06072cef783df71456d92d13520fa096.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/home-page","title":"SAP Fiori Launchpad Home Page","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Home Page","lastModified":1782337314,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad home page is the first page that users see after they have signed in. It is the main entry point to ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_16dc3be2f9443e29d0ed0116bec26f5abcfe32481.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/app-finder","title":"App Finder","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / App Finder","lastModified":1782337313,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The app finder allows you to browse all SAP Fiori, SAP GUI, and Web Dynpro ABAP apps in one place. It is available in the ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_13ba1291ffd940838846eceac47655f24ccc9df23.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/sap-fiori-launchpad-spaces","title":"SAP Fiori Launchpad Spaces","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Spaces","lastModified":1782337314,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_16f72ac0248bab2c56af202e3d0551b6e21b6d631.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/services","title":"SAP Fiori Launchpad Services","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad Services","lastModified":1782337315,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","intro-desc":"SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_130348e70d783a65fed4991372085a7fd06ba1142.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad","lastModified":1782337313,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/enterprise-search","title":"Enterprise Search","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / Enterprise Search","lastModified":1782337314,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"After entering a search term, users can trigger the search by pressing ENTER, by clicking the magnifier icon, or by selecting one of the suggestions. ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_1c99516cb73d573ee3cd8b163bcfac119b8bf85a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/launchpad","title":"SAP Fiori Launchpad","version":"","breadcrumbs":"Foundations / Integration and Services / SAP Fiori Launchpad / SAP Fiori Launchpad","lastModified":1782337313,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and ...","intro-desc":"The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_1a221d37841913562971ccd174f4d99325212bac1.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/typography/typography","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography / Typography","lastModified":1782337317,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/typography/media_126fff8004eae3494a9ce27ad773cf89155ea3d41.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/cozy-compact","title":"Content Density (Cozy and Compact)","version":"","breadcrumbs":"Foundations / Visual / Content Density (Cozy and Compact)","lastModified":1782337317,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported ...","intro-desc":"SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported in the same way: interaction with a mouse and keyboard as well as by touch.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_181991c8bd8f95f41457f4f175f559c5b8c3f9bd0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1782337316,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is the latest visual theme that has been designed for SAP Fiori applications.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/motion-design","title":"Motion Design","version":"","breadcrumbs":"Foundations / Visual / Motion Design","lastModified":1782337318,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time ...","intro-desc":"Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time dimension that makes it an ideal medium for storytelling. In the context of SAP Fiori, motion design and microinteractions work together to provide our users with a coherent user experience.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_1199a7a4e3bf13956d83bc9a1de308a26ae1b2579.gif?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/ux-illustrations","title":"UX Illustrations","version":"","breadcrumbs":"Foundations / Visual / UX Illustrations","lastModified":1782337318,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"UX Illustrations are visual elements that can be paired with written messages. You can use UX illustrations to:","intro-desc":"UX Illustrations are visual elements that can be paired with written messages. You can use UX illustrations to:","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_1e618cde328d2b56a4fa2cc6085e7c49cedea9fb2.jpg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/iconography","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography","lastModified":1782337318,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/typography-overview","title":"Typography","version":"","breadcrumbs":"Foundations / Visual / Typography","lastModified":1782337317,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/colors/quartz-dark-colors","title":"Quartz Dark Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Dark Colors","lastModified":1782337319,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme ...","intro-desc":"Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/colors/media_14502ab4f6d1a3687f67f65a2395e4672020106de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/iconography/icons","title":"Iconography","version":"","breadcrumbs":"Foundations / Visual / Iconography / Iconography","lastModified":1782337318,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored ...","intro-desc":"SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted, hand-hinted, and aligned in font format. The icons are essentially vector graphics that can be resized easily without compromising their appearance.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/iconography/media_11d9d449f052b4f87fbbb2871ec6f63b4a6e3e76c.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/colors/colors","title":"Belize Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Belize Colors","lastModified":1782337319,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance ...","intro-desc":"Belize is a visual theme we provide for SAP Fiori applications, in addition to the standard Quartz Light theme. In SAP Fiori, color communicates importance and association, and provides direction to users.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/colors/media_1887ace1546b8434c515d488a9aec983121d0bbab.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/colors/quartz-light-colors","title":"Quartz Light Colors","version":"","breadcrumbs":"Foundations / Visual / Colors / Quartz Light Colors","lastModified":1782337319,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, ...","intro-desc":"Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/colors/media_1ffa2f21d350d10e7ce992b3fd2e0c6a819c5f4ac.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations","lastModified":1782337317,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different application themes and how they support accessibility standards.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/visual/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services","title":"integration-and-services","version":"","breadcrumbs":"","lastModified":1782337353,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/typography","title":"typography","version":"","breadcrumbs":"","lastModified":1782337354,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual/colors","title":"colors","version":"","breadcrumbs":"","lastModified":1782337354,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/visual","title":"visual","version":"","breadcrumbs":"","lastModified":1782337354,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/merged-header","title":"SAP Fiori Launchpad – Merged Header","version":"","breadcrumbs":"","lastModified":1782337431,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.84.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/edit-with-subpages","title":"Edit with Subpages","version":"","breadcrumbs":"","lastModified":1782337431,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/fiori-client","title":"SAP Fiori Client","version":"","breadcrumbs":"","lastModified":1782337431,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772 and Sunset of the SAP Fiori Client.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/integration-and-services/sap-fiori-launchpad/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/locking","title":"Locking","version":"","breadcrumbs":"","lastModified":1782337431,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This page was deprecated with guideline version 1.38.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-96/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139","title":"v1-139","version":"","breadcrumbs":"","lastModified":1782339049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-meta-image.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana","title":"SAP S/4HANA","version":"","breadcrumbs":"Discover / Products / SAP S/4HANA","lastModified":1782339049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the design project setup and the activities at each stage of the design-led development process.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-products/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/get-started","title":"Get Started","version":"","breadcrumbs":"Discover / Get Started","lastModified":1782339050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here you’ll find everything you need to get started designing and building world class SAP apps that bring out the best in every business. The ...","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/media_1d2aa5e1079563183111d2f311518fae90aaf333a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/get-started/sapui5-development","title":"SAPUI5 Development","version":"","breadcrumbs":"","lastModified":1782339049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Visit the page below for an introduction to SAP Fiori on SAPUI5.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/get-started/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/get-started/ui5","title":"SAP Fiori on SAPUI5","version":"","breadcrumbs":"Discover / Get Started / SAP Fiori on SAPUI5","lastModified":1782339049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAPUI5 is the main framework for developing SAP Fiori web applications","intro-desc":"SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/get-started/ui-elements-overview","title":"UI Elements (SAPUI5)","version":"","breadcrumbs":"Discover / Get Started / UI Elements (SAPUI5)","lastModified":1782339050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori UI elements, including simple, complex, reusable, smart controls, and those supporting assistive technologies.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/get-started/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/get-started/web-components-overview","title":"SAP Web Components","version":"","breadcrumbs":"Discover / Get Started / SAP Web Components","lastModified":1782339050,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Web Components are framework-agnostic and can be easily integrated into different web development environments.","intro-desc":"SAP Web Components are framework-agnostic and can be easily integrated into different web development environments.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/get-started/media_1abb86ed35a0f913aa78a159004cba123b529880a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/learning-journey","title":"Learning Journey","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Learning Journey","lastModified":1782339049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A collection of learning resources for app designers.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/product-consistency","title":"Product Consistency","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Product Consistency","lastModified":1782339049,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design guidelines ensure consistency across products, with additional product-specific guidelines for tailored applications.","intro-desc":"The SAP Fiori design guidelines define universal rules for the SAP Fiori design language, ensuring a minimum level of consistency across all products.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/media_12a7af32dcdde6d1dc193a9433388fe94cfb79fce.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home","title":"SAP S/4HANA Product Home Page – My Home","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Product Home Page – My Home","lastModified":1782339052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP S/4HANA product home page offers enhanced personalization, access to tasks, situations, quick navigation, and analytical insights.","intro-desc":"The SAP S/4HANA product home page is an alternative to the SAP Fiori launchpad My Home page when using SAP S/4HANA Cloud. The previously available SAP Fiori launchpad My Home page is the entry point to a personalized set of apps, presented as tiles or links, whereas the SAP S/4HANA product home page orchestrates much more information.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/media_1d02af60edd7bc80b6a4ce78bb89529b26321609d.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/sap-s4hana-design-decisions","title":"SAP S/4HANA Design Decisions","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / SAP S/4HANA Design Decisions","lastModified":1782339051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Contains all the design decisions for SAP S/4 HANA","intro-desc":"Contains design decisions for SAP S/4HANA. If needed, the respective guideline articles introduce the decisions with SAP S/4HANA Only.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/dld-in-s4-hana-icd-and-dsc","title":"Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Design-Led Development in S/4HANA, S/4HANA Industries, and DSC","lastModified":1782339052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Design-Led Development (DLD) process for S/4HANA and DSC enhances UX support, collaboration, and flexibility in design projects.","intro-desc":"The design-led development (DLD) process for S/4HANA, S/4HANA Industries (formerly known as ICD), and Digital Supply Chain (DSC) aims to equip every design project with appropriate user research and interaction design support. It serves to improve collaboration between application UX, product management (PM), product owners (PO), development teams, and SAP UX.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/media_1ae5c2959796dec30e438debe112eb27b08d113ca.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/best-practices-for-designing-sap-fiori-apps","title":"Best Practices for Designing SAP Fiori Apps","version":"","breadcrumbs":"Discover / SAP Products / SAP S/4HANA Only / Best Practices for Designing SAP Fiori Apps","lastModified":1782339052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about the best practices for designing SAP Fiori Apps","intro-desc":"After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-products/sap-s4hana-only/media_1b27db6dd4b6c0eec3b05bd02699ba8e86b44bd1a.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission","title":"Vision and Mission","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission","lastModified":1782339051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/design-principles","title":"Design Principles","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design Principles","lastModified":1782339051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori delivers a consistent, intuitive, holistic, and simple user experience by creating visually appealing designs","intro-desc":"SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/design-led-development-process-external","title":"Design-Led Development Process","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Design-Led Development Process","lastModified":1782339051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP’s design-led development process uses proven design thinking to ensure consistent, user-focused experiences across all applications and devices.","intro-desc":"SAP is committed to designing role-based applications that address the needs of our end users across all lines of business, tasks, and devices. We believe this is the key to a great user experience (UX). But how do we guarantee a solid and consistent design for our customers and end users? The answer is SAP’s design-led development process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/media_1ec9991d1adc6d26c349fbdfe17a171c1c93dc1de.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/responsiveness-adaptiveness","title":"Multi-Device Support: Responsive vs. Adaptive","version":"","breadcrumbs":"Discover / SAP Design System / Vision and Mission / Multi-Device Support: Responsive vs. Adaptive","lastModified":1782339052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps provide a seamless, consistent experience across all devices, allowing users to work anywhere, anytime.","intro-desc":"For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/media_1c209bf73248f79e9ab1b9e9de77800d0ff16d8e3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/mobile-first","title":"Mobile First","version":"","breadcrumbs":"","lastModified":1782339051,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"\"Mobile first\" means reimagining your approach to complexity by starting with the design of a simple mobile app.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/vision-and-mission/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/local-meanings-of-metaphors-and-symbols","title":"Meanings of Metaphors and Symbols","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Meanings of Metaphors and Symbols","lastModified":1782339052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"In SAP Fiori, it's important to consider their local meanings to ensure they enhance user experience and business processes.","intro-desc":"Metaphors, symbols, or icons can have different local meanings and interpretations. Even symbols that we assume are universal – such as emojis, street signs, or warning signs – are often not as universal as we think.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/local-working-methods-and-operations","title":"Cultural Differences in Needs and Behavior","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Cultural Differences in Needs and Behavior","lastModified":1782339052,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Cultural factors like norms, beliefs, and technology trends influence how people work and interact, impacting design decisions.","intro-desc":"The ways in which people interact with each other depend on a variety of cultural aspects that can also influence their day-to-day jobs. These aspects may include socio-cultural norms and conditions; beliefs; attitudes to responsibility and taking the initiative; established practices; demographics; and trends in technology. They may also have an impact on design decisions.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/intercultural-aspects-of-user-experience","title":"Intercultural Aspects of User Experience – Overview","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural Aspects of User Experience – Overview","lastModified":1782339053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori aims to create intuitive, globally usable software for better usability and acceptance.","intro-desc":"SAP software runs on all continents, serving people across different regions and cultures. It is simple courtesy to be respectful of a person’s culture, and this has a direct impact on the acceptance and usability of our software.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1782339053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"Internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/product-standards","title":"Product Standards","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards","lastModified":1782339054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/fundamentals-culture-and-intercultural-ux","title":"Culture and Intercultural UX","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Culture and Intercultural UX","lastModified":1782339053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Intercultural UX design ensures usability and positive experiences by considering cultural and contextual differences in business environments.","intro-desc":"Culture, as we understand it, follows the concept of culture coined by Geertz (1973) as “webs of significance that man himself has spun”. The analysis of these webs is concerned with the ways people find meaning in the world.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/product-standards/ux-consistency","title":"UX Consistency","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / UX Consistency","lastModified":1782339053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori design reduces cognitive load and ensures a cohesive, intuitive user experience across all products.","intro-desc":"Consistency is one of the keys to user-friendly and intuitive UX design. It reduces the user’s cognitive load, as things always behave the same.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/sap-fiori","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System / SAP Design System","lastModified":1782339055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Design System provides a consistent user experience for SAP software across platforms and devices.","intro-desc":"The SAP Design System is a design system that provides a consistent user experience for SAP software across platforms and devices. It’s at the core of SAP’s product experience and design strategy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/media_1ebc11fcd0b84ce6782c2d725b67b2ba175adb6bc.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/local-environments","title":"Intercultural UX – Environment","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design / Intercultural Aspects / Intercultural UX – Environment","lastModified":1782339053,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Local factors like technology infrastructure, network connectivity, and power reliability must be considered in UX design to ensure a seamless user experience.","intro-desc":"The local environment can influence both the way people act and overall business processes. A key factor is the technology infrastructure, especially network connectivity and power outages. Both can have a decisive impact on the user experience and need to be considered during the UX design process.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/inclusive-design/intercultural-aspects/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system","title":"SAP Design System","version":"","breadcrumbs":"Discover / SAP Design System","lastModified":1782339054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section outlines the foundations of the SAP Design System for web applications.","intro-desc":"This section outlines the foundations of the SAP Design System for web applications.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/sap-design-system/product-standards/accessibility-in-sap-fiori","title":"Accessibility in SAP Fiori","version":"","breadcrumbs":"Discover / SAP Design System / Product Standards / Accessibility in SAP Fiori","lastModified":1784625174,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Accessibility in SAP Fiori and SAPUI5 ensures inclusive design, with built-in features at the framework level and app-specific adjustments as needed.","intro-desc":"Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use information and communication technology. It is an integral part of the SAP Fiori design system and SAPUI5.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/sap-design-system/product-standards/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/interaction/timing","title":"Timing","version":"","breadcrumbs":"Foundations / Timing","lastModified":1782339055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Timing refers to how long it takes for a component to appear or disappear from the screen, as well as any intentional delay between user input and system response.","intro-desc":"Timing refers to how long a component appears or disappears on screen, as well as any intentional delay between user input and the system response. The speed should be slow enough for users to notice changes, but fast enough to avoid unnecessary waiting.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/interaction/media_160b1b3a19586472ca52b4b5d7581edaf71b2c1ed.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/visual/colors-overview","title":"Colors","version":"","breadcrumbs":"Foundations / Visual / Colors","lastModified":1782339055,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Color communicates importance and association while providing direction to users.","intro-desc":"Color brings your screens to life. It communicates importance and association, letting users quickly identify key elements. When you use the theme’s color palette, you help create a clean, lightweight design that stays consistent and coherent across all SAP Fiori applications. Thoughtful use of color enhances visual hierarchy, usability, and accessibility. Colors also reinforce consistency and help users recognize status or visual feedback.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/visual/media_177f1d34328b976c544a3e6b636ebd3d93917a9d3.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/visual/shadow-concept","title":"Shadow Concept","version":"","breadcrumbs":"Foundations / Visual / Shadow Concept","lastModified":1782339055,"designowner":"Core Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Shadow levels indicate the visual layering hierarchy of container controls in the UI.","intro-desc":"The shadow concept offers a standard way to show depth in applications. It defines several depth levels that apply to all container components, such as tiles, menus, dialogs, and other elements. Each depth level uses a unique shadow, so you can easily distinguish one layer from another. This helps create a consistent visual hierarchy.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/visual/media_14dbb64f65f6354761925c467e140d6f04bec2714.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations - Overview","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations - Overview","lastModified":1782339055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This section offers consistent use of design elements like colors, typography, and icons ensures strong branding, following guidelines on design tokens, and theming.","intro-desc":"Visual design plays a key role in how users perceive and recognize a product. Applying consistent styles reinforces brand identity and helps users feel confident as they interact with your application. Explore the sections below to get an overview of each visual design area and find links to detailed guidance:","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/visual/media_15dc136939bdb3eb73c26f981180d7a1a4b3c9d35.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/dynamic-page-web-component","title":"Dynamic Page Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782339055,"designowner":"Core Design Web","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"A layout component, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/grid-layout","title":"Grid Layout","version":"","breadcrumbs":"","lastModified":1782339055,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/flexible-column-layout","title":"Flexible Column Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782339055,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout enables seamless navigation across multiple floorplans on a single page with resizable columns and various layout options.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/flexible-column-layout-web-component","title":"Flexible Column Layout (Web Component)","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Column Layout","lastModified":1782339055,"designowner":"Cloud ERP","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/letter-boxing","title":"Letterboxing","version":"","breadcrumbs":"Page Types / Page Layouts / Letterboxing","lastModified":1782339055,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"Letterboxing in SAP Fiori restricts the UI width to 1280px, ensuring consistent aspect ratios, with optional use for adapting to larger screens.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/spacing","title":"Responsive Spacing System","version":"","breadcrumbs":"Page Types / Page Layouts / Responsive Spacing System","lastModified":1782339056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The responsive spacing system optimizes padding between elements in SAP Fiori interfaces using responsive padding and margin classes.","intro-desc":"The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1fd5b5e55fc67f3332ddbc43a7387f26f68b76a5e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/page-web-component","title":"Page","version":"","breadcrumbs":"Page Types / Page Layouts / Page","lastModified":1782339056,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible column layout displays multiple responsive floorplans on a single page, adaptable to various screen sizes.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/dynamic-page-layout","title":"Dynamic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Dynamic Page Layout","lastModified":1782339056,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The dynamic page in SAP Fiori offers a flexible layout with a collapsible header and optional footer toolbar, supporting various floor plans and use cases.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/semantic-page","title":"Semantic Page Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Semantic Page Layout","lastModified":1782339056,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The semantic page is a predefined layout for freestyle apps, enhancing the dynamic page with predefined header and footer elements, aligning with SAP Fiori Design Guidelines.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/multi-instance-handling-floorplan","title":"Multi-Instance Layout","version":"","breadcrumbs":"Page Types / Page Layouts / Multi-Instance Layout","lastModified":1782339056,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The multi-instance layout lets users view and edit multiple objects on one page, with each object displayed in a separate tab.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/page-types/page-layouts/flexible-grid","title":"Flexible Grid","version":"","breadcrumbs":"Page Types / Page Layouts / Flexible Grid","lastModified":1782339057,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"The flexible grid control enables responsive layouts with customizable columns and rows for optimal display on both desktop and mobile devices.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/page-types/page-layouts/media_1e493fa69e730a21f4cabeec636baf17178f9aef6.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/analytical-frameworks/smart-business-drilldown-app","title":"SAP Smart Business Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / SAP Smart Business Framework","lastModified":1782339058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Smart Business drilldown enables the user to view and analyze the data of one key performance indicator.","intro-desc":"SAP Smart Business drilldown is an analytical app. It enables the user to view and analyze the data of one key performance indicator (KPI).","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/analytical-frameworks/media_1ecb91f0f1bd4289bf7fac15dd7b5ecfdb6191c73.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/analytical-frameworks/analysis-path-framework","title":"Analysis Path Framework","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks / Analysis Path Framework","lastModified":1782339057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The Analysis Path Framework enables users to create interactive, chart-based analytical drilldown apps for exploring and investigating KPIs from multiple data sources.","intro-desc":"Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown apps by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources. Users can interactively explore data step by step from different perspectives to analyze and investigate root causes. In each analysis step, you can investigate KPIs/measures and select relevant data to filter the information provided in subsequent steps. By combining different analysis steps and applying filters, you interactively create your own flexible analysis path.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/analytical-frameworks/media_13c0a32cf660ff94271312170ee2634f9f375c3b4.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/analytical-frameworks","title":"Analytical Frameworks","version":"","breadcrumbs":"Discover / Frameworks / Analytical Frameworks","lastModified":1782339057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","intro-desc":"Analytical frameworks turn enterprise data into interactive, decision-ready insights. They provide guided, configurable drilldowns that take you from high-level KPIs to root-cause details.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/object-page-header-sap-fiori-elements","title":"Object Page – Header","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Header","lastModified":1782339057,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page header detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/media_1648e6371a26398f6fbedc294b5e47e67b4599684.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/object-page-overview-sap-fiori-elements","title":"Object Page – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Overview","lastModified":1782339058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/media_1c7f8686593bb09b62b13d2f5fca6e76ae02177fb.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/analytical-list-page-overview-page-sap-fiori-elements-2","title":"Analytical List Page / Overview Page","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Analytical List Page / Overview Page","lastModified":1782339058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This is where you can find all the information about all the design possibilities supported by the templates","intro-desc":"Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates. Consequently, you can find the information for all the design possibilities supported by those templates in the guidelines linked below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/object-page-content-area-sap-fiori-elements","title":"Object Page – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Content Area","lastModified":1782339058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page content area","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/media_11fd078b8b3628d4618205383af52e7d4aa52da69.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/object-page-footer-bar-sap-fiori-elements","title":"Object Page – Footer Bar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Object Page / Object Page – Footer Bar","lastModified":1782339058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements object page template supports the features and settings for the object page footer","intro-desc":"The SAP Fiori elements object page template supports the features and settings for the object page footer detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/object-page/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/list-report/worklist-sap-fiori-elements","title":"Worklist","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / Worklist","lastModified":1782339058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings","intro-desc":"With SAP Fiori elements, the worklist is a simplified list report without a filter bar and shares many features and settings with the list report that are described in the SAP Fiori elements list report articles.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/list-report/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/find-information-and-get-help","title":"Find Information and Get Help","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Find Information and Get, Help","lastModified":1782339058,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Here, you will find selected information assets to help you:","intro-desc":"Here, you will find selected information assets to help you:","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/media_164f2612f4ee06d52fb0f0706dd29206cb033b26b.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/list-report/list-report-content-area-fiori-elements","title":"List Report – Content Area","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Content Area","lastModified":1782339059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements list report template supports simple content layout, multiple view layout, and multiple content layout","intro-desc":"The SAP Fiori elements list report template supports the three content area layouts detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/list-report/media_1ddbe2b3cfec7d3c7233c7a334aa3817626202a6e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/tables-and-lists/table-types-sap-fiori-elements","title":"Table Types","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types","lastModified":1782339059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the different table types","intro-desc":"The SAP Fiori elements templates support the features and settings for the different table types detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/tables-and-lists/tables-toolbar","title":"Table Toolbar","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Toolbar","lastModified":1782339060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","intro-desc":"The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/tables-and-lists/media_104a4cc90b3026bd75b11042940583fa5b5548916.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/tables-and-lists/list-sap-fiori-elements","title":"List","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Tables and Lists / List","lastModified":1782339059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements template helps enable the display of a list in the list report","intro-desc":"With SAP Fiori elements for OData V2, you can enable the display of a list in the list report with:","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/tables-and-lists/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/terminology-sap-fiori-elements","title":"Terminology for SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Terminology for SAP Fiori Elements","lastModified":1782339059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements help you communicate better with the application developers","intro-desc":"To help you better communicate with application developers, this article presents development and design terms used in the context of SAP Fiori Elements.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/replacing-placeholder-text","title":"Replacing Placeholder Text","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Replacing Placeholder Text","lastModified":1782339059,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori elements templates support the features and settings for replacing the placeholder text","intro-desc":"Onscreen text and messages that are familiar to users in their business context simplify their work.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements","title":"SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements","lastModified":1782339060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen ...","intro-desc":"SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen from scratch, you assemble an app from standardized pages that are automatically filled with your business data and actions. The result is a consistent, responsive, and accessible UX that follows SAP Fiori guidelines with far less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/smart-templates","title":"SAP Fiori Elements – Overview","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements – Overview","lastModified":1782339060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements is a framework that comprises the most used floorplan templates and is designed to:","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/sap-fiori-elements/media_190a3003cb2d038be1ebc8c47f84406da50e2cdaf.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks","title":"Frameworks","version":"","breadcrumbs":"Discover / Frameworks","lastModified":1782339060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","intro-desc":"Frameworks are reusable building blocks that speed delivery and ensure consistent, accessible SAP Fiori experiences with less custom design and code.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/discover/frameworks/smart-templates","title":"Introduction to SAP Fiori Elements","version":"","breadcrumbs":"Discover / Frameworks / SAP Fiori Elements / Introduction to SAP Fiori Elements","lastModified":1782339060,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/discover/frameworks/media_15432ba67e13896de9692f453a80ea4850d765877.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/ai-notice-base-concept","title":"AI Notice Base Concept","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / AI Notice Base Concept","lastModified":1782339062,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Outlines UX and UI design methods that ensure that users are aware when interacting with AI-generated or AI-edited information.","intro-desc":"This guideline outlines UX and UI design methods that ensure users are clearly aware when interacting with AI-generated or AI-edited information. In accordance with the SAP Global AI Ethics Policy, transparency is crucial for building trust in AI-enhanced products, and the AI notice concept plays a key role in achieving this transparency.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/media_15c7e662d18e9923836bbf46fbb66ae41f68298cd.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/navigation/navigation","title":"Navigation","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Navigation","lastModified":1782339061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori uses a hub-and-spoke navigation model, with a central home page and easy back navigation to provide seamless user flow across apps.","intro-desc":"Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/navigation/media_1e93ccccc2b283d2a243d359a6999c48eb4e66169.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/action-placement","title":"Action Placement","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Action Placement","lastModified":1782339061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains how to organize and place actions in SAP Fiori, ensuring they are easily accessible and clearly differentiated from navigation.","intro-desc":"Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/media_128002c0e7ad9fddbc4088324de29e7aeaa10fc07.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/delete-objects","title":"Object Handling – Delete","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Delete","lastModified":1782339061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Objects can be deleted from a list or object page, with a confirmation dialog to prevent accidental deletion, unless specified otherwise.","intro-desc":"You can delete objects either from a list report or from the corresponding object page. If the object contains subitems, the delete flow for the items depends on the structure of the object (simple or complex).","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_1420ac552e13b7b375167d6c0dc74f30370306117.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/create-with-reference","title":"Object Handling – Create with Reference","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Create with Reference","lastModified":1782339062,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about using the create with reference pattern for creating a new object and referencing it to an existing object.","intro-desc":"Use the create with reference pattern if you want to create a new object and reference it to an existing object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_18613303bfe2a1150661fb1e7e7277403519fcba6.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/forward","title":"Forward","version":"","breadcrumbs":"","lastModified":1782339061,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Forwarding items is now handled by a Forward action in the Share menu of the header toolbar.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_1e961a60197e1e5d4cd0d2c20de47b6f96ffe4d20.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/manage-objects","title":"Object Handling (Create, Edit, Delete)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling (Create, Edit, Delete)","lastModified":1782339062,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers actions for objects, including creating, editing, and deleting, with options to create from scratch, copy, or reference existing objects.","intro-desc":"In addition to the basic display option, the following actions are available for objects:","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_1a1bffad1a50c3c37c0c8b043ffe551513e1d2b80.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/manage-objects-with-local-flow","title":"Complex Objects – Local Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Local Flow (Create, Edit)","lastModified":1782339063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the local flow for creating and editing items with standard and draft handling, where each subpage is saved separately.","intro-desc":"This article describes the local flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_1c8c74db63ff7c7cbca5347151b48e2aadd70407e.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/draft-handling","title":"Draft Handling","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Draft Handling","lastModified":1782339064,"designowner":"Cloud ERP","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A draft is a temporary version of a business entity that saves unsaved changes, prevents data loss, and allows editing resumption until saved as the active version.","intro-desc":"A draft is a temporary version of a business entity that has not yet been explicitly saved as an active version.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_14824efef9dca768e282b67d962819d953809c925.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/manage-parts-of-an-object","title":"Object Handling – Partial Edit","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Partial Edit","lastModified":1782339062,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Object handling interaction flow is used to edit specific sections or items of an object.","intro-desc":"Use this interaction flow if you want to make only part of an object editable (single sections or items).","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_151176540ca66a2118dae22b47e68ef45b94f4f55.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/manage-simple-objects","title":"Simple Objects (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Simple Objects (Create, Edit)","lastModified":1782339063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article talks about flows to create and edit simple objects, with all information on one page and standard message and draft handling.","intro-desc":"Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_1a1cc118fe7262666a86d6ce90117d257b1581cc7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/copy","title":"Object Handling – Copy","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Object Handling – Copy","lastModified":1782339063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The copy pattern allows you to copy an object and then edit the newly created object.","intro-desc":"The copy pattern allows you to copy an object and then edit the newly created object.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_19c2b382122892c2af0945dd02aeb09a4cc5f41a8.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/manage-objects-with-the-global-flow","title":"Complex Objects – Global Flow (Create, Edit)","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Object Handling / Complex Objects – Global Flow (Create, Edit)","lastModified":1782339062,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article explains the global flow for creating and editing items, where only the main page needs to be saved, unlike the local flow.","intro-desc":"This article describes the global flow for creating and editing items using standard message handling and draft handling.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/object-handling/media_107badff44f210450a3174b27162b1185cbeb4ef7.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/designing-for-empty-states","title":"Empty States","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Empty States","lastModified":1782339064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article covers empty states in apps, explaining their purpose, design recommendations, and how to enhance user experience with clear guidance.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/media_19f4505aa19fac28906348de6d2119371f56c59e0.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/mobile-integration-concept","title":"Mobile Integration","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Mobile Integration","lastModified":1782339063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"SAP Fiori apps can leverage native mobile features like camera, GPS, and accelerometer for ensuring consistency.","intro-desc":"SAP Fiori applications can also use native mobile qualities, such as camera or GPS.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/messaging/processing-multiple-items","title":"Message Handling – Processing Multiple Items","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Processing Multiple Items","lastModified":1782339064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This guideline covers how to communicate the status of multiple item processing, including success, failure, and partial processing, with clear messages for users.","intro-desc":"When a user selects multiple items from a table, it might not be possible to process all of the items at once.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/messaging/media_1f814c060f04e00e414ce785987d3ef3a347b4c32.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/messaging/messaging","title":"Message Handling – Overview","version":"","breadcrumbs":"Foundations / Best Practices / Global Patterns / Messaging / Message Handling – Overview","lastModified":1782339064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"This article provides an overview of SAP Fiori message types and how to use them effectively in messaging scenarios.","intro-desc":"Carefully orchestrated messages are key to the user experience: they guide and validate user actions, and serve to both pre-empt and help resolve problems. But messages also distract users and interrupt their flow, so it’s important to always use messages consistently and optimize the interaction as a whole.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns/messaging/media_139884682f4371430549515bb250c4886df56dc47.png?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/global-patterns","title":"Best Practices – Global Patterns","version":"","breadcrumbs":"Foundations / Best Practices / Best Practices – Global Patterns","lastModified":1782339063,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/media_11079964f839382b5a49fb7540ddc3c16c10da2b2.svg?width=1200&format=pjpg&optimize=medium","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-139/foundations/best-practices/ui-elements/tables/overview-table-personalization","title":"Table Personalization (Overview)","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Tables / Table Personalization (Overview)","lastModified":1782339065,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Live","description":"Table personalization allows users to modify column visibility, order, sorting, grouping, and filtering for both simple and complex tables.","intro-desc":"Table personalization can be used to modify the display and settings of a table.","image":"https://www.sap.com/design-system/fiori-design-web/v1-139/foundations/best-practices/ui-elements/tables/media_148972a96b93f4654262668