{"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":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to create a design that follows the SAP Fiori design guidelines.","intro-desc":"","image":"about:error","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":1777125021,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Develop awareness of UX consistency concepts and learn how to apply them in practice.","intro-desc":"","image":"about:error","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/sap-design-system-academy/foundations/ai","title":"Artificial Intelligence","version":"","breadcrumbs":"SAP Design System Academy / Foundations / Artificial Intelligence","lastModified":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Get an overview of the training offerings in the AI space.","intro-desc":"Our board members never tire of mentioning how important the integration of artificial intelligence into our products is for the future. Our customers count on us to deliver smart solutions that help their users in their daily work. So let’s expand our knowledge and learn how to create just those intelligent solutions.","image":"https://www.sap.com/design-system/fiori-design-web/sap-design-system-academy/foundations/media_152494a6bf50fccb3f75b1885f3703fe3cb082fbc.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/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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125035,"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":"about:error","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":1779893363,"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":"about:error","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":1777125055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125051,"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":"about:error","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":1777125055,"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":"about:error","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":1777125055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125051,"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":"about:error","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"internal_only","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":1777125070,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"A collection of learning resources for app designers.","intro-desc":"","image":"about:error","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":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the AI color palette for embedded AI and Joule.","intro-desc":"","image":"about:error","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":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777125084,"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":"about:error","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":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the icon for SAP's conversational AI panel.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125084,"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":"about:error","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":1779893363,"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":"about:error","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":1777125085,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"about:error","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":1777125085,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125084,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Follow five guiding principles whenever you design generative AI features.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777125125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777125125,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"about:error","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":1777125146,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777125164,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772[internal_only] and Sunset of the SAP Fiori Client[/internal_only].","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":1779893363,"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":"about:error","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":1777125230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"about:error","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":1777125230,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777125230,"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":"about:error","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":1777125231,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out our evolving content design resources for WalkMe content creators.","intro-desc":"","image":"about:error","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":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":"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":"about:error","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":1777125214,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to create icons for web apps in a third-party marketplace.","intro-desc":"","image":"about:error","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":1777125250,"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":"about:error","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":1779893363,"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":"about:error","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":1777125251,"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":"about:error","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":1777125265,"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":"about:error","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":1777125267,"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":"about:error","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":1777125266,"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":"about:error","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":1777125267,"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":"about:error","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":1777125266,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125282,"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":"about:error","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":1777125282,"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":"about:error","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":1777125283,"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":"about:error","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":1777125284,"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":"about:error","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":1777125283,"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":"about:error","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":1777125281,"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":"about:error","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":1777125284,"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":"about:error","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":1777125284,"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":"about:error","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":1777125284,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777125299,"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":"about:error","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":1777125300,"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":"about:error","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":1777125299,"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":"about:error","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":1777125299,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"about:error","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":1777125300,"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":"about:error","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":1777125316,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"about:error","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":1777125316,"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":"about:error","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":1777125315,"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":"about:error","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":1777125315,"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":"about:error","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":1777125315,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777125314,"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":"about:error","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":1777125314,"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":"about:error","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":1779893363,"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":"about:error","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":1777125316,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777125316,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777125331,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the user research resources available to support your design-led development journey.","intro-desc":"","image":"about:error","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":1777125332,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777125331,"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":"about:error","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":1779893363,"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":"about:error","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":1777125348,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"","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":1777125347,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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/breadcrumbs-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125380,"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/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-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125382,"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/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/bar-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/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/button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125395,"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/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":1777125413,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"","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/calendar-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125412,"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/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/carousel-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125413,"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/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/card-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125412,"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/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":1777125431,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125431,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125428,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125430,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125429,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125428,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125429,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125430,"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-136/ui-elements/chart-vizframe/chart-types","title":"Chart Types","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart Types","lastModified":1777125429,"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-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":1777125446,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125448,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125447,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1777125446,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125445,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125445,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125463,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125462,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125464,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125465,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777125462,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125462,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125464,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125463,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125463,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125464,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125464,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777125465,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","intro-desc":"","image":"about:error","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-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-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-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125481,"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-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":1777125478,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1777125480,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1777125497,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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-time-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125514,"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/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":1777125512,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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-range-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/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/dialog-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125529,"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/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":1777125530,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"","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/icon-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125598,"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/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-web-component/style","title":"Accessing the Component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125599,"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/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":1777125614,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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/label-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125617,"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/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":1777125581,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","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/link-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125632,"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/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/list-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125633,"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/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":1777125632,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","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/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125650,"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/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/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125649,"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/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/message-strip-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125665,"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/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":1777125668,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1777125683,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1777125698,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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/panel-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125700,"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/popover-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125715,"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/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/progress-indicator-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125717,"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/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/range-slider-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125733,"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/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/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125734,"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/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-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125733,"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/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/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125749,"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/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":1777125749,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777125750,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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/segmented-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125767,"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/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":1777125781,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":"internal_only","version":"","breadcrumbs":"","lastModified":1779893363,"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/slider-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125795,"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/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":1777125811,"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-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/step-input-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125813,"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/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/split-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125811,"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/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/switch-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125827,"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/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/tab-bar-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125828,"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/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-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125844,"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/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-area-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125845,"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/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-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125845,"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/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/time-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125860,"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/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/toast-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125862,"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/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/toggle-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125863,"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/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/title-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125862,"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/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":1777125881,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","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/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125879,"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/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":1777125897,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"about:error","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-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777125896,"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/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":1777125914,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"","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":1777125914,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"","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":1777125929,"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":"about:error","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":1777125928,"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":"about:error","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":1777125929,"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":"about:error","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":1777125939,"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":"about:error","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":1777125939,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777125939,"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":"about:error","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":1777125939,"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":"about:error","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":1777125939,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"about:error","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":1777125939,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777125939,"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":"about:error","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":1777125970,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777125970,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":"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/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":1779893363,"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":"about:error","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":1777297499,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1779893363,"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":"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/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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":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 list report template supports the features and settings for the list report header detailed below.","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777297502,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/discover/sap-products/sap-s4hana-only","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297502,"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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with our design principles, design-led development process, and multi-device approach.","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/inclusive-design","title":"Inclusive Design","version":"","breadcrumbs":"Discover / SAP Design System / Inclusive Design","lastModified":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777297501,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","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/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":1779893363,"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":"about:error","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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297502,"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":1777297502,"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":"about:error","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":1777297501,"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":"about:error","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777297516,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the AI color palette for embedded AI and Joule.","intro-desc":"","image":"about:error","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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297516,"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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"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-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":1779893363,"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":"about:error","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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297516,"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":1779893363,"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":"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","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":1777297516,"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":"about:error","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":1779893363,"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":"about:error","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":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777297518,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the icon for SAP's conversational AI panel.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/best-practices","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297518,"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":1779893363,"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":"about:error","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":1777297518,"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":"about:error","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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297539,"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":1777297539,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1779893363,"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":"about:error","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":1777297537,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1779893363,"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":"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/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":1777297537,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","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/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":1777297539,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772[internal_only] and Sunset of the SAP Fiori Client[/internal_only].","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":1779893363,"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":"about:error","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":1777297538,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/foundations/integration-and-services","title":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297538,"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":1777297538,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"about:error","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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297560,"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":1777297561,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to create icons for web apps in a third-party marketplace.","intro-desc":"","image":"about:error","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":1777297562,"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":"about:error","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":1777297562,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"about:error","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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297583,"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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297583,"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":1778501671,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1777297583,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out our evolving content design resources for WalkMe content creators.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777297583,"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":"about:error","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":1779893363,"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":"about:error","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":1777297602,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"about:error","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":1777297601,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777297603,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297602,"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":"about:error","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":1777297620,"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":"about:error","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":1777297620,"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":"about:error","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":1777297619,"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":"about:error","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":1777297620,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"about:error","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":1777297620,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777297620,"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":"about:error","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":1777297620,"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":"about:error","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":1777297620,"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":"about:error","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":1777297620,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777297620,"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":"about:error","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":1777297620,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-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":1777297620,"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":"about:error","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":1779893363,"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":"about:error","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 (internal)","version":"","breadcrumbs":"","lastModified":1779960200,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-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":1777297640,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"","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 (external)","version":"","breadcrumbs":"Resources / User Research","lastModified":1779960185,"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":"Fiori design web","version":"","breadcrumbs":"","lastModified":1777297639,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-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":1777297660,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"This page has been deprecated. See the Avatar component for SAPUI5.","intro-desc":"","image":"about:error","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":1777297660,"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":"about:error","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":1777297676,"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":"about:error","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":1777297676,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777297696,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","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":1777297727,"designowner":"Core Design System","uielementstechnology":"","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","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":1777297727,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777297728,"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":"about:error","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":1777297728,"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":"about:error","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":1777297745,"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":"about:error","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":1777297745,"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":"about:error","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":1777297744,"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":"about:error","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":1777297763,"designowner":"","uielementstechnology":"SAPUI5","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","title":"Segmented Button","version":"","breadcrumbs":"UI Elements / Segmented Button","lastModified":1777297776,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"","elementstatus":"","description":"A segmented button is a group of buttons that can be toggled.","intro-desc":"","image":"about:error","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":1777297777,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1777297791,"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":"about:error","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":1781167797,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","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":1777297792,"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":"about:error","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":1777297762,"designowner":"","uielementstechnology":"SAPUI5","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/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":1777297805,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777297804,"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":"about:error","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/bar-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297805,"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/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/busy-indicator-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297805,"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/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/breadcrumbs-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297805,"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/ai-text-highlight","title":"AI Text Highlight","version":"","breadcrumbs":"UI Elements / AI Text Highlight","lastModified":1777297805,"designowner":"","uielementstechnology":"","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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/carousel-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297806,"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/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/card-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297806,"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/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-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297806,"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/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/button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297806,"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/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":1777297806,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Container","elementstatus":"Available","description":"","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":1777297818,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1777297819,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Subcomponent","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1777297819,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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/color-palette-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/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-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/date-range-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297821,"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","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":1777297836,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"","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-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297836,"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/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/illustrated-message-web-component/style","title":"Accessing the Component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297836,"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/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/icon-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297836,"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/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/label-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297837,"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/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/list-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297837,"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/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/menu-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297837,"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/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/menu-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297837,"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/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":1777297853,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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/radio-button-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297854,"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/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":1777297852,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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/rating-indicator-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297854,"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/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":1777297853,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297855,"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/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/progress-indicator-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/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":1777297854,"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-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":"internal_only","version":"","breadcrumbs":"","lastModified":1779893363,"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/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297855,"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/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/panel-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/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/toolbar-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/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/title-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1777297870,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","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/text-area-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/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":1777297871,"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":"about:error","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/tab-bar-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/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/table-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/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":1777297871,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"","uielementscategory":"Container","elementstatus":"Available","description":"","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/time-picker-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/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/text-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/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":1777297872,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777297872,"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":"about:error","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":1777297872,"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":"about:error","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":1777297872,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"about:error","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":1777297871,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"Upload single or multiple files from a device to an SAP Fiori app.","intro-desc":"","image":"about:error","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":1777297872,"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":"about:error","intro-image":"","page-tabs":"","visibility":"deprecated","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-145/ui-elements/tree-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297871,"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/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/toast-web-component/style","title":"Accessing the component in the SAP Web UI Kit","version":"","breadcrumbs":"","lastModified":1777297870,"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/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":1777297871,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"","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":1777297872,"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":"about:error","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":1777297872,"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":"about:error","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":1777297872,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777297874,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-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":1777297874,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"https://www.sap.com/default-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":1777297874,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777297874,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777298985,"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":"about:error","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":1779893363,"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":"about:error","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":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777298985,"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":"about:error","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":1779893363,"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":"about:error","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":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"","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":1777298987,"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":"about:error","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":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":"about:error","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":1777298986,"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":"about:error","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":1777298986,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777298986,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777299002,"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":"about:error","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":1777299001,"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":"about:error","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":1777299001,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Follow five guiding principles whenever you design generative AI features.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777299001,"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":"about:error","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":1777299002,"designowner":"AI Design System","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299002,"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":"about:error","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":1777299001,"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":"about:error","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":1777299002,"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":"about:error","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":1777299002,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to use the icon for SAP's conversational AI panel.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777299001,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the AI color palette for embedded AI and Joule.","intro-desc":"","image":"about:error","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":1777299002,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"about:error","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":1777299002,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"about:error","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":1777299002,"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":"about:error","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":1777299001,"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":"about:error","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":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":"about:error","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":1779893363,"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":"about:error","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":1777299032,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":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":"about:error","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":1779893363,"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":"about:error","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":1777299032,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":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":"about:error","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":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":"about:error","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":1777299032,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"about:error","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":1777299047,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"about:error","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":1777299048,"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":"about:error","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":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"How to create icons for web apps in a third-party marketplace.","intro-desc":"","image":"about:error","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":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772[internal_only] and Sunset of the SAP Fiori Client[/internal_only].","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":1777299048,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777299048,"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":"about:error","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":1777299064,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different application themes and how they support accessibility standards.","intro-desc":"","image":"about:error","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":1777299064,"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":"about:error","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":1777299080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"about:error","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":1777299081,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299081,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299080,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"about:error","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":1777299081,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299081,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299081,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299081,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777299095,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"about:error","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":1777299095,"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":"about:error","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":1777299094,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299094,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299094,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299095,"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":"about:error","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":1777299094,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299095,"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":"about:error","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":1777299095,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299094,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299095,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299095,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299095,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"about:error","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":1777299110,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299110,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777299125,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Target Design","description":"","intro-desc":"","image":"about:error","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":1777299125,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"","intro-desc":"","image":"about:error","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":1777299124,"designowner":"","uielementstechnology":"--","elementtype":"Component","uielementscategory":"Action","elementstatus":"Target Design","description":"","intro-desc":"","image":"about:error","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":1777299124,"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":"about:error","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":1779893363,"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":"about:error","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":1777299125,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Target Design","description":"","intro-desc":"","image":"about:error","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":1777299139,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299184,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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":1777299185,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299185,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299185,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299198,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299199,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299198,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299199,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299199,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299199,"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":"about:error","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":1777299198,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299199,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299213,"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":"about:error","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":1777299212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299213,"designowner":"AI Design System","uielementstechnology":"--","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Target Design","description":"","intro-desc":"","image":"about:error","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":1777299212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299212,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299212,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299230,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777299230,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","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","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":1777299230,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299230,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":"internal_only","version":"","breadcrumbs":"","lastModified":1779893363,"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":1777299245,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299245,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299245,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299245,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299245,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299260,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299260,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299260,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299259,"designowner":"","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299260,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299260,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299259,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299275,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299275,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299276,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299275,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299276,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299290,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299290,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299290,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299289,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299289,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299322,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299335,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299337,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299337,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299337,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299337,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299336,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299337,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299352,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299352,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299352,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299352,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299352,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299352,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299353,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299387,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299387,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299387,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299386,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299388,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299388,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299402,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299404,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299403,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299402,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299403,"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":"about:error","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":1777299405,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299402,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","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/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":1777299403,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299405,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777299421,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299419,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299421,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299421,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299370,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299369,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299370,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"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":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299434,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"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":"about:error","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":1777299434,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299434,"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":"about:error","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":1777299433,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299434,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299433,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299434,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777299434,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777300054,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777300054,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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-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":1777300055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn how to establish a feedback loop in intelligent systems.","intro-desc":"","image":"about:error","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":1777300055,"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":"about:error","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":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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777300055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777300055,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777300054,"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":"about:error","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":1777300073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777300074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"about:error","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":1777300073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore design concepts for intelligent business systems and machine learning in SAP business software.","intro-desc":"","image":"about:error","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":1777300074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777300074,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777300073,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"about:error","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":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":"about:error","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":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":"about:error","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":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Explore the layout and features of the SAP Fiori launchpad home page.","intro-desc":"","image":"about:error","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":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Morning Horizon is the latest visual theme that has been designed for SAP Fiori applications.","intro-desc":"","image":"about:error","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":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Provide users with context-sensitive help and guided tours directly within your app.","intro-desc":"","image":"about:error","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":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772[internal_only] and Sunset of the SAP Fiori Client[/internal_only].","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":1777300091,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777300092,"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/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":1777300092,"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":"about:error","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":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":"about:error","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":1777300093,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the different application themes and how they support accessibility standards.","intro-desc":"","image":"about:error","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":1777300092,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Apply the basic rules for UI text in SAP applications.","intro-desc":"","image":"about:error","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":1777300094,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300093,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300093,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300093,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/page-types/page-layouts/full-screen","title":"Full Screen Layout","version":"","breadcrumbs":"","lastModified":1777300107,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/page-types/floorplans/create-page","title":"Create Page Floorplan","version":"","breadcrumbs":"","lastModified":1777300106,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1777300106,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"An implementation of the list report floorplan as a reusable template.","intro-desc":"","image":"about:error","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":1777300106,"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":"about:error","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":1777300107,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300107,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777300106,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300106,"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":"about:error","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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300106,"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":"about:error","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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/resources/downloads","title":"SAP Fiori Design Stencils","version":"","breadcrumbs":"Resources / Libraries / SAP Fiori Design Stencils","lastModified":1779893363,"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":"about:error","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":1777300107,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1777300106,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","intro-desc":"","image":"about:error","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":1777300107,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300107,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300107,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"about:error","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":1777300123,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300123,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300124,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300123,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300124,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300123,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777300123,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300123,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300124,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300140,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","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-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":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","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-distribution","title":"Chart – Distribution","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Choosing the Correct Chart Type / Chart – Distribution","lastModified":1777300139,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300157,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300157,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Display and Messaging","elementstatus":"","description":"Allows you to show a prefiltered view of a list.","intro-desc":"","image":"about:error","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":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300159,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300157,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300158,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300174,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300174,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300174,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300174,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300173,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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":1777300174,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300174,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300174,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300173,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300191,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300191,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300193,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300191,"designowner":"","uielementstechnology":"SAPUI5","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/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":1777300191,"designowner":"","uielementstechnology":"SAPUI5","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/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":1777300191,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300191,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300191,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300191,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300191,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300192,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300193,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300193,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300193,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300193,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"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":"about:error","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":1777300210,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300210,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","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","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":1777300209,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300209,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300225,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","description":"","intro-desc":"","image":"about:error","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":1777300224,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300225,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300225,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300224,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300225,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300225,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300226,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"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":"about:error","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":1777300231,"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":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"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":"about:error","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":1777300231,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777300231,"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":"about:error","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":1780046937,"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":"","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":1777300632,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":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":"about:error","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":1777300631,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Think about local factors like technology infrastructure, network connectivity, and power reliability.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","intro-image":"","page-tabs":"","visibility":"","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":1777300632,"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":"about:error","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":1779893363,"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":"about:error","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":1777300631,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777300632,"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":"about:error","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":1779893363,"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":"about:error","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":1777300631,"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":"about:error","intro-image":"","page-tabs":"","visibility":"","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":1777300648,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777300648,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"The SAP Fiori Client is no longer supported. For details, see SAP Note 2992772[internal_only] and Sunset of the SAP Fiori Client[/internal_only].","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":1777300664,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the five guiding principles for the SAP Fiori user experience.","intro-desc":"","image":"about:error","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":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Harmonize component orchestration to deliver consistent behavior across SAP Fiori apps.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777301010,"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":"about:error","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":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Familiarize yourself with our design principles, design-led development process, and multi-device approach.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Do you want to find out more about SAPUI5? Check out the links below.","intro-desc":"","image":"about:error","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":1779893363,"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":"about:error","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":1777301010,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn where to place actions and how to style them.","intro-desc":"","image":"about:error","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":1777301026,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1777301026,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"","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":1779893363,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"internal_only]Use this flow to create","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":1777301041,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists.","intro-desc":"","image":"about:error","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":1777301056,"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/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":1777301056,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Learn about the color system used in SAP Fiori applications.","intro-desc":"","image":"about:error","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":1777301055,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Run SAP Fiori launchpad as a native mobile application on iOS and Android.","intro-desc":"","image":"about:error","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":1777301055,"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":"about:error","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":1777301072,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Write consistent page and card titles, subtitles, and action texts in overview pages.","intro-desc":"","image":"about:error","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":1777301071,"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/foundations/visual/look-feel-and-wording","title":"Visual Design Foundations","version":"","breadcrumbs":"Foundations / Visual / Visual Design Foundations","lastModified":1777301071,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":"Check out the \"cozy\" and \"compact\" component sizing for touch and mouse interaction.","intro-desc":"","image":"about:error","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":1777301071,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1779893363,"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":"about:error","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":1779893363,"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":"about:error","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":1777301087,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301087,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"Flexible and responsive layout grid system.","intro-desc":"","image":"about:error","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":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301101,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301102,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree; Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301101,"designowner":"","uielementstechnology":"","elementtype":"","uielementscategory":"","elementstatus":"","description":":download-blue: Download Design Stencils (Axure RP) and SAP Icon Font","intro-desc":"","image":"about:error","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":1777301119,"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":"about:error","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":1777301119,"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":"about:error","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":1777301134,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301134,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301134,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301134,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization; Action; Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":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-38/ui-elements/chart-vizframe/chart-semantic-pattern/media_1a18fb46eb11e6b9f7a8acaeea918efe371e6ab43.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-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":1777301151,"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/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":1777301151,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301151,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301150,"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/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":1777301151,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301151,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301150,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301151,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301150,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301165,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301166,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301165,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301165,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301165,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301166,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301165,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301166,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301181,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301180,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301180,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301180,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301180,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301181,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301196,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301196,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301197,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301196,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301215,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301215,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301215,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301231,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301231,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301231,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","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-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":1777301231,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301231,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301232,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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":1777301246,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301246,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","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","title":"Label (Web Component)","version":"","breadcrumbs":"UI Elements / Label (Web Component)","lastModified":1777301246,"designowner":"Core Design System","uielementstechnology":"SAP Web Components","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","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","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1777301246,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301247,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301246,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","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","title":"Label","version":"","breadcrumbs":"UI Elements / Label","lastModified":1777301246,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301246,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","elementstatus":"Available","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/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":1777301261,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301262,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301262,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301261,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"","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":1777301262,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301262,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301262,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301279,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301278,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301278,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301327,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301327,"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":"about:error","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":1777301311,"designowner":"","uielementstechnology":"SAPUI5","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/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":1777301342,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301342,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","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-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":1777301357,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301357,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301356,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301371,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301371,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301371,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301371,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Table, List, Tree; Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301377,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1777301377,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","intro-desc":"","image":"about:error","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":1778052421,"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 ...","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":1778062340,"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 ...","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":1778062341,"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 ...","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":1778062341,"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.","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":1778062341,"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 ...","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":1778062341,"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 ...","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":1778783502,"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/pop-over","title":"Chart Popover","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Popover","lastModified":1778783616,"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/zoom","title":"Chart – Zoom","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Zoom","lastModified":1778784090,"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/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":1778783705,"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/color-palettes","title":"Chart Color Palettes","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Chart Color Palettes","lastModified":1778783430,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","description":"","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":1778783905,"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/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":1778783802,"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/legend","title":"Chart – Legend","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Legend","lastModified":1778783536,"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/chart-value-based-legend","title":"Chart – Value-Based Legend","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Value-Based Legend","lastModified":1778783380,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","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/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":1778782339,"designowner":"","uielementstechnology":"","elementtype":"--","uielementscategory":"","elementstatus":"Available","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/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":1778784163,"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":"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":1778783469,"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/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":1778784045,"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/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":1778783962,"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/range-selector","title":"Chart – Range Selector","version":"","breadcrumbs":"Foundations / Best Practices / UI Elements / Charts / Range Selector","lastModified":1778783655,"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/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":1778782196,"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/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":1778611877,"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/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":1778784216,"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":"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":1778784252,"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/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":1778784328,"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/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":1778784355,"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/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":1778784410,"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/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":1778784444,"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/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":1778784495,"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/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":1778784584,"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/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":1778784666,"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/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":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","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":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","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":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057741,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057740,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780057761,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780057760,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1780057760,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","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/expandable-text","title":"Expandable Text","version":"","breadcrumbs":"UI Elements / Expandable Text","lastModified":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"Container","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/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":1780057760,"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-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":1780057760,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/flag-and-favorite","title":"Flag and Favorite","version":"","breadcrumbs":"UI Elements / Flag and Favorite","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","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/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":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","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/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/formatted-text","title":"Formatted Text","version":"","breadcrumbs":"UI Elements / Formatted Text","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","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/input-list-item","title":"Input List Item","version":"","breadcrumbs":"UI Elements / Input List Item","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","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/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":1780057760,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/invisible-text","title":"Invisible Text","version":"","breadcrumbs":"UI Elements / Invisible Text","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","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/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","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/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":1780057761,"designowner":"","uielementstechnology":"SAPUI5","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/invisible-message","title":"Invisible Message","version":"","breadcrumbs":"UI Elements / Invisible Message","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","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/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1780057760,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","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/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":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","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/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1780057760,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780057761,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1780057761,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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":1780057761,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; 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/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":1780057783,"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-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":1780057783,"designowner":"","uielementstechnology":"SAPUI5","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/message-box","title":"Message Box","version":"","breadcrumbs":"UI Elements / Message Box","lastModified":1780057782,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780057783,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1780057782,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1780057783,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780057782,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780057783,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780057783,"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-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":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/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":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Input and Selection","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/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":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780057783,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780057783,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780057783,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/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":1780057783,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container","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/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":1780057783,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","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/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":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","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/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":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/smart-list","title":"Smart List","version":"","breadcrumbs":"UI Elements / Smart List","lastModified":1780057805,"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-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":1780057805,"designowner":"","uielementstechnology":"SAPUI5","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/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":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/translation-of-textual-user-input","title":"Translatable User Input","version":"","breadcrumbs":"UI Elements / Translatable User Input","lastModified":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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":"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":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","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/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":1780057805,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/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":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","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/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":1780057805,"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-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":1780057806,"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-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":1780057806,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","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/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":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/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":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780057806,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","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":"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":1780057805,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/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":1780057806,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780057805,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/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":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780057817,"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-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":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780057817,"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-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":1780057817,"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-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":1780057817,"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-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":1780057817,"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-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":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/smart-filter-bar-annotations","title":"Smart Filter Bar","version":"","breadcrumbs":"UI Elements / Smart Filter Bar","lastModified":1780057817,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/currency","title":"Currency","version":"","breadcrumbs":"UI Elements / Currency","lastModified":1780057817,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1780057817,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780057817,"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-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":1780057817,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1780057817,"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-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":1780057817,"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-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":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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":"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":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780057817,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780057817,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","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/line-micro-chart","title":"Line Micro Chart","version":"","breadcrumbs":"UI Elements / Line Micro Chart","lastModified":1780057817,"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-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":1780057817,"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-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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780059793,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780059976,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780059975,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780059976,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780059976,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780059992,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","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/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1780059992,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","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/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1780059991,"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/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1780059992,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1780059991,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1780059991,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780059992,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","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/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1780059991,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780060007,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/icontabbar","title":"Icon Tab Bar","version":"","breadcrumbs":"UI Elements / Icon Tab Bar","lastModified":1780060008,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action; 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/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":1780060007,"designowner":"","uielementstechnology":"SAPUI5","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/form-field-validation","title":"Form Field Validation","version":"","breadcrumbs":"UI Elements / Form Field Validation","lastModified":1780060007,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; 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/infobar","title":"Infobar","version":"","breadcrumbs":"UI Elements / Infobar","lastModified":1780060008,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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":1780060007,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1780060007,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780060008,"designowner":"","uielementstechnology":"SAPUI5","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/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":1780060023,"designowner":"","uielementstechnology":"SAPUI5","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/multi-combobox","title":"Multi-Combo Box","version":"","breadcrumbs":"UI Elements / Multi-Combo Box","lastModified":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/menu-button","title":"Menu Button","version":"","breadcrumbs":"","lastModified":1780060023,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"","elementstatus":"","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":"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":1780060023,"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-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":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780060023,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1780060023,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/link","title":"Link","version":"","breadcrumbs":"UI Elements / Link","lastModified":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","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/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":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780060023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780060039,"designowner":"","uielementstechnology":"SAPUI5","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/notification-center","title":"Notifications","version":"","breadcrumbs":"UI Elements / Notifications","lastModified":1780060038,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","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/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":1780060038,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780060056,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060056,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060072,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780060072,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/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":1780060072,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","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/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":1780060072,"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-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":1780060072,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/shell-bar","title":"Launchpad Shell Bar","version":"","breadcrumbs":"UI Elements / Launchpad Shell Bar","lastModified":1780060072,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780060088,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","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/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1780060088,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780060103,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","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/variant-management","title":"Variant Management","version":"","breadcrumbs":"UI Elements / Variant Management","lastModified":1780060104,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1780060104,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/tree","title":"Tree","version":"","breadcrumbs":"UI Elements / Tree","lastModified":1780060104,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/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":1780060103,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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":"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":1780060104,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/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":1780060104,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/tree-table","title":"Tree Table","version":"","breadcrumbs":"UI Elements / Tree Table","lastModified":1780060104,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/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":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","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/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":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","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":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060119,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060132,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","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/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":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","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":1780060133,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060133,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/chart-vizframe/value-display","title":"Chart – Value Display","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Value Display","lastModified":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060132,"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-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":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060132,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/comparison-micro-chart","title":"Comparison Micro Chart","version":"","breadcrumbs":"UI Elements / Comparison Micro Chart","lastModified":1780060132,"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-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":1780060132,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","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/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":1780060133,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/chart-vizframe/gestures","title":"Chart – Gestures","version":"","breadcrumbs":"UI Elements / Chart (VizFrame) / Chart – Gestures","lastModified":1780060132,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780060132,"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-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":1780060147,"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-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":1780060147,"designowner":"","uielementstechnology":"SAPUI5","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/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1780060147,"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-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":1780060147,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","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/interactive-chart","title":"Interactive Chart","version":"","breadcrumbs":"UI Elements / Interactive Chart","lastModified":1780060147,"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-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":1780060147,"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-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":1780060147,"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-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":1780060146,"designowner":"","uielementstechnology":"SAPUI5","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/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1780060146,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","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/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1780060147,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780060147,"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-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":1780060147,"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-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":1780060147,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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":"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":1780060147,"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-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":1780060161,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780060161,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780060161,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780060162,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1780060161,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/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":1780060162,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780060161,"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-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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780060559,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780060559,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060560,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"","description":"","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":1780060559,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Floorplan","uielementscategory":"","elementstatus":"Available","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060560,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780060566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780060566,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780060567,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","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":1780060566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780060566,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780060566,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780060567,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"","description":"","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":1780060567,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Layout","uielementscategory":"","elementstatus":"Available","description":"","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":1780061009,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","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/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":1780061009,"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-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":1780061009,"designowner":"Core Design CAX","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/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":1780061011,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/message-strip","title":"Message Strip","version":"","breadcrumbs":"UI Elements / Message Strip","lastModified":1780061010,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/translation-of-textual-user-input","title":"Translation of Textual User Input","version":"","breadcrumbs":"UI Elements / Translation of Textual User Input","lastModified":1780061011,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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":"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":1780061011,"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-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":1780061011,"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-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":1780061012,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/multiinput","title":"Multi-Input Field","version":"","breadcrumbs":"UI Elements / Multi-Input Field","lastModified":1780061012,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780061012,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/responsive-table/category-navigation","title":"Category Navigation","version":"","breadcrumbs":"UI Elements / Responsive Table / Category Navigation","lastModified":1780061013,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780061013,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"","elementstatus":"--","description":"","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":1780061013,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/message-popover","title":"Message Popover","version":"","breadcrumbs":"UI Elements / Message Popover","lastModified":1780061014,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/t-account","title":"T Account","version":"","breadcrumbs":"UI Elements / T Account","lastModified":1780061015,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/interactive-donut-chart","title":"Interactive Donut Chart","version":"","breadcrumbs":"UI Elements / Interactive Donut Chart","lastModified":1780061014,"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-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":1780061014,"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-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":1780061014,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Action","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/variant-management","title":"Variant Management","version":"","breadcrumbs":"UI Elements / Variant Management","lastModified":1780061014,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/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":1780061016,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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":"internal_only","saptheme":"sap_glow"},{"path":"/design-system/fiori-design-web/v1-71/ui-elements/switch","title":"Switch","version":"","breadcrumbs":"UI Elements / Switch","lastModified":1780061016,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/title","title":"Title","version":"","breadcrumbs":"UI Elements / Title","lastModified":1780061016,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780061017,"designowner":"","uielementstechnology":"SAPUI5","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/line-chart","title":"Line Chart","version":"","breadcrumbs":"UI Elements / Line Chart","lastModified":1780061016,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780061017,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780061018,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/visual-filter-bar","title":"Visual Filter Bar","version":"","breadcrumbs":"UI Elements / Visual Filter Bar","lastModified":1780061018,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/menu-button","title":"Menu Button","version":"","breadcrumbs":"UI Elements / Menu Button","lastModified":1780061018,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Action","elementstatus":"Available","description":"","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":1780061019,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/micro-chart","title":"Micro Chart","version":"","breadcrumbs":"UI Elements / Micro Chart","lastModified":1780061019,"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-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":1780061019,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780061020,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780061020,"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-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":1780061020,"designowner":"","uielementstechnology":"SAPUI5","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/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":1780061021,"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-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":1780061022,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","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/wizard","title":"Wizard Floorplan","version":"","breadcrumbs":"UI Elements / Wizard Floorplan","lastModified":1780061022,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection","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/column-chart","title":"Column Chart","version":"","breadcrumbs":"UI Elements / Column Chart","lastModified":1780061022,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780061022,"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-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":1780061023,"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-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":1780061023,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Action","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/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":1780061024,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/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":1780061024,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","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":1780061024,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061024,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061024,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061025,"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-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":1780061025,"designowner":"","uielementstechnology":"SAPUI5","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/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":1780061026,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/network-graph","title":"Network Graph","version":"","breadcrumbs":"UI Elements / Network Graph","lastModified":1780061026,"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-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":1780061026,"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-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":1780061027,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780061027,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/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":1780061028,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061029,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061029,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/combo-box","title":"Combo Box","version":"","breadcrumbs":"UI Elements / Combo Box","lastModified":1780061030,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780061030,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"","uielementscategory":"Data Visualization","elementstatus":"","description":"","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":1780061030,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","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/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":1780061031,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061031,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061031,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061032,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"--","uielementscategory":"Data Visualization","elementstatus":"Available","description":"","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":1780061033,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","elementstatus":"Available","description":"","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":1780061034,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Input and Selection; 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/grid-list","title":"Grid List","version":"","breadcrumbs":"UI Elements / Grid List","lastModified":1780061033,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/dialog","title":"Dialog","version":"","breadcrumbs":"UI Elements / Dialog","lastModified":1780061034,"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/infobar","title":"Info Bar","version":"","breadcrumbs":"UI Elements / Info Bar","lastModified":1780061034,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging","elementstatus":"Available","description":"","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":1780061034,"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-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":1780061035,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","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/datetime-picker","title":"Date/Time Picker","version":"","breadcrumbs":"UI Elements / Date/Time Picker","lastModified":1780061035,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/comparison-pattern","title":"Comparison Pattern","version":"","breadcrumbs":"UI Elements / Comparison Pattern","lastModified":1780061034,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/dynamic-side-content","title":"Dynamic Side Content","version":"","breadcrumbs":"UI Elements / Dynamic Side Content","lastModified":1780061035,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Layout","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/generic-tag","title":"Generic Tag","version":"","breadcrumbs":"UI Elements / Generic Tag","lastModified":1780061035,"designowner":"Core Design System","uielementstechnology":"SAPUI5","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/date-picker","title":"Date Picker","version":"","breadcrumbs":"UI Elements / Date Picker","lastModified":1780061035,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/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":1780061036,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/footer-toolbar","title":"Footer Toolbar","version":"","breadcrumbs":"UI Elements / Footer Toolbar","lastModified":1780061036,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Container; Action","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/filter-bar","title":"Filter Bar","version":"","breadcrumbs":"UI Elements / Filter Bar","lastModified":1780061036,"designowner":"Cloud ERP","uielementstechnology":"SAPUI5","elementtype":"Pattern","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/image","title":"Image","version":"","breadcrumbs":"UI Elements / Image","lastModified":1780061036,"designowner":"","uielementstechnology":"SAPUI5","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/generic-mask-input","title":"Mask Input","version":"","breadcrumbs":"UI Elements / Mask Input","lastModified":1780061037,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/color-palette","title":"Color Palette","version":"","breadcrumbs":"UI Elements / Color Palette","lastModified":1780061036,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/gantt-chart","title":"Gantt Chart","version":"","breadcrumbs":"UI Elements / Gantt Chart","lastModified":1780061037,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Chart","uielementscategory":"Data Visualization","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/group-feed-component","title":"Group Feed Component","version":"","breadcrumbs":"UI Elements / Group Feed Component","lastModified":1780061037,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Pattern","uielementscategory":"Display and Messaging; Input and Selection","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/grid-table","title":"Grid Table","version":"","breadcrumbs":"UI Elements / Grid Table","lastModified":1780061037,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Table, List, Tree","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/display-list-item","title":"Display List Item","version":"","breadcrumbs":"UI Elements / Display List Item","lastModified":1780061037,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Subcomponent","uielementscategory":"Table, List, Tree","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/date-range-selection","title":"Date Range Selection","version":"","breadcrumbs":"UI Elements / Date Range Selection","lastModified":1780061037,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Input and Selection","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/form","title":"Form / Simple Form","version":"","breadcrumbs":"UI Elements / Form / Simple Form","lastModified":1780061038,"designowner":"Core Design System","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Container; Input and Selection","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/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":1780061038,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Display and Messaging; Input and Selection","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/chart","title":"Chart (VizFrame)","version":"","breadcrumbs":"UI Elements / Chart (VizFrame)","lastModified":1780061038,"designowner":"","uielementstechnology":"SAPUI5","elementtype":"Component","uielementscategory":"Data Visualization","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/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"}],"offset":0,"limit":5237,"total":5237,":type":"sheet"}