Skip to search Skip to content
  • Home
  • Get Started
    • Why Design Guidelines?
    • Navigating the Guidelines
    • Best Practices for Designing SAP Fiori Apps
  • Explore SAP Fiori
  • What’s New
  • SAP Fiori Design System
    • Overview
    • Design Principles
    • Design-Led Development
    • Accessibility
    • Multi-Device Support
    • Responsive Spacing
  • Look, Feel, and Wording
    • Overview
    • Design Tokens
    • Theming
    • Colors
      • Morning Horizon
      • Evening Horizon
      • Quartz Light
      • Quartz Dark
      • Belize
      • ———————————–
      • Chart Color Palettes
      • Chart Color Palettes – Values and Names
      • ———————————–
      • How To Use Semantic Colors / Industry Colors
    • Iconography
      • Horizon
      • Quartz
    • Motion Design
    • Typography
      • Horizon
      • Quartz
    • UX Illustrations
    • UI Texts and In-App Help
      • UI Text Guidelines for SAP Fiori
      • Overview Page – UI Text Guidelines
      • Situation Handling Framework – UI Text Guidelines
      • SAP Companion
  • SAP Fiori Launchpad
    • Overview
    • Shell Bar
      • Overview
      • Enterprise Search
      • Notifications
      • Services
    • Home Page
    • Spaces
    • My Home
    • App Finder
    • Tile
  • AI and Joule Design
    • Overview
    • Guidelines
      • Design Principles
      • Building Trust
      • ———————————–
      • Explainable AI
      • Matching
      • Ranking
      • Recommendations
      • Situation Handling
      • User Feedback
    • Glossary
    • Helpful Links on SAP AI
    • Get in Touch with Us
  • General Patterns
    • Overview
    • Action Placement
    • Busy States
    • Collaboration
    • Content Density (Cozy & Compact)
    • Drafts
    • Empty States
    • Export to Spreadsheet
    • Flag and Favorite
    • Form Field Validation
    • Formatting
      • Overview
      • Dates
      • Numbers
      • Time
      • Units of Measurement
    • Navigation
    • Message Handling
      • Overview
      • Processing Multiple Items
    • Mobile Integration
    • Object Handling (Create, Edit, Delete)
      • Overview
      • Simple Objects (Create, Edit)
      • Complex Objects – Global Flow (Create, Edit)
      • Complex Objects – Local Flow (Create, Edit)
      • Copy
      • Create with Reference
      • Partial Edit
      • Mass Edit
      • Delete
    • Placeholder Loading
  • Page Layouts and Floorplans
    • Overview
    • When to Use Which Floorplan
    • Page Layouts
      • Comparison Pattern
      • Dynamic Page
      • Semantic Page
      • Flexible Column Layout
      • Letterboxing
      • Multi Instance
    • Floorplans
      • Analytical List Page
      • Initial Page
      • List Report
      • Object Page
      • Overview Page
      • Wizard
      • Worklist
  • UI Elements – SAPUI5
    • Overview
    • When to Use
      • Semantic States / Industry Colors
      • Tooltips
      • Which Selection Control?
      • Which UI Element State?
      • Wrapping and Truncation
    • Action / Navigation
      • Action Sheet
      • Breadcrumb
      • Button
      • Icon Tab Bar
      • Link
      • Smart Link
    • Collaboration
      • Feed and Notes
      • Group Feed Component
      • Timeline
    • Data Visualization
      • 3D Viewport
      • Analytical Card
      • Calendar Card
      • Chart (VizFrame)
      • Gantt Chart
      • Interactive Chart
      • Map
      • Micro Chart
      • Micro Process Flow
      • Network Graph
      • Process Flow
      • Status Indicator
      • Timeline
    • Dialog / Popover
      • Dialog
      • Cloud File Browser
      • Message Box
      • Select Dialog
      • Table Select Dialog
      • Value Help Dialog
      • ———————————–
      • Popover
      • Quick View
    • Display
      • Avatar
      • Avatar Group
      • Carousel
      • Currency
      • Expandable Text
      • Formatted Text
      • Generic Tag
      • HTML
      • Image
      • Infobar
      • Label
      • Lightbox
      • Object Display Components
      • PDF Viewer
      • Progress Indicator
      • Status Indicator
      • T Account
      • Text
      • Tile
      • Title
      • Token
    • Filter
      • Filter Bar
      • Icon Tab Bar
      • Infobar
      • Smart Filter Bar
      • Token
      • Visual Filter Bar
      • Views
        (Variant Management)
    • Form / Layout / Container
      • Card
      • Carousel
      • Dynamic Side Content
      • Flexible Grid
      • Form / Simple Form
      • Icon Tab Bar
      • Panel
      • Scroll Container
      • Side Panel
      • Smart Form
    • Loading / Processing
      • Busy Dialog
      • Busy Indicator
      • Busy State
    • Messaging
      • Illustrated Message
      • Message Box
      • Message Popover
      • Message Strip
      • Message Toast
      • Message View
    • Table / List / Tree
      • Overview
      • ———————————–
      • Analytical Table (ALV)
      • Grid Table
      • Responsive Table
      • Smart Table
      • Tree Table
      • ———————————–
      • Table Personalization
      • ———————————–
      • Grid List
      • List
      • Smart List
      • Tree
    • Toolbar
      • Overview
      • Chart Toolbar
      • Footer Toolbar
      • Header Toolbar
      • Table Toolbar
      • Tree Toolbar
    • User Input
      • Input Field
      • Multi-Input Field
      • Combo Box
      • Multi-Combo Box
      • Select
      • Smart Field
      • Mask Input
      • ———————————–
      • Select Dialog
      • Table Select Dialog
      • Value Help Dialog
      • ———————————–
      • Checkbox
      • Radio Button
      • Rating Indicator
      • Slider
      • Range Slider
      • Step Input
      • Switch
      • ———————————–
      • Date Picker
      • Time Picker
      • Date/Time Picker
      • Date Range Selection
      • Dynamic Date Range
      • Calendar Date Interval
      • Calendar
      • Planning Calendar
      • Single Planning Calendar
      • ———————————–
      • Color Palette
      • Color Palette Popover
      • Color Picker
      • Color Picker Popover
      • ———————————–
      • Feed and Notes
      • Rich Text Editor
      • Search
      • Text Area
      • Upload Set
    • Reuse Components
      • Calculation Builder
    • Smart Controls
      • Smart Field
      • Smart Filter Bar
      • Smart Form
      • Smart Link
      • Smart List
      • Smart Table
    • Support for Assistive Technologies
      • Invisible Message
      • Invisible Text
  • UI Elements – SAP Web Components
    • Overview
    • Interaction Design Foundations
      • States
      • Wrapping and Truncation
    • Avatar
    • Avatar Group
    • Bar
    • Breadcrumbs
    • Busy Indicator
    • Button
    • Calendar
    • Card
    • Carousel
    • Checkbox
    • Color Palette
    • Color Palette Popover
    • Color Picker
    • Combobox
    • Date Picker
    • Date Range Picker
    • Date/Time Picker
    • Dialog
    • Dynamic Side Content
    • Flexible Column Layout
    • Form
    • Icon
    • Illustrated Message
    • Input
    • Label
    • Link
    • List
    • Menu
    • Menu Button
    • Message Strip
    • Multi Combobox
    • Multi Input
    • Page
    • Panel
    • Popover
    • Progress Indicator
    • Radio Button
    • Range Slider
    • Rating Indicator
    • Responsive Popover
    • Segmented Button
    • Select
    • Slider
    • Split Button
    • Step Input
    • Switch
    • Tab Bar
    • Table
    • Text
    • Text Area
    • Time Picker
    • Title
    • Toast
    • Toggle Button
    • Toolbar
    • Tree
  • SAP S/4HANA Only
    • Integration of Classic SAP UIs
      (SAP Fiori Elements List Report)
    • SAP S/4HANA Product Home Page – My Home
    • System Information Bar
  • SAP Fiori Elements Framework
    • Overview
    • Analytical List Page / Overview Page
    • List Report / Worklist
      • Header
      • Content Area
      • Worklist
      • Integration of Classic SAP UIs
        (SAP Fiori Elements List Report)
    • Object Page
      • Overview
      • Header
      • Content Area
      • Footer Bar
    • Table / List
      • Table Types
      • Table Toolbar
      • Table Features
      • Table Rows
      • List
    • Replacing Placeholder Text
    • Terminology
  • Analytical Frameworks
    • Overview
    • Analysis Path Framework
    • SAP Smart Business
  • Designer Toolkit
    • Overview
    • UI Kit
      • Download Fonts
      • SAP Fiori for Web UI Kit
      • SAP S/4HANA Web UI Kit
    • User Research Resources
    • Ask the Community

Fiori for Web Design Guidelines

Home Dynamic Date

Month: January 2017

Dynamic Date

January 5, 2017, Updated: June 23, 2017
  • You are currently browsing the SAP Fiori for Web Design Guidelines blog archives for January, 2017.

  • Pages

    • Explore SAP Fiori
  • Archives

    • October 2024
    • September 2024
    • August 2024
    • July 2024
    • June 2024
    • May 2024
    • April 2024
    • March 2024
    • February 2024
    • January 2024
    • December 2023
    • November 2023
    • October 2023
    • September 2023
    • August 2023
    • June 2023
    • March 2023
    • February 2023
    • January 2023
    • December 2022
    • September 2022
    • July 2022
    • June 2022
    • May 2022
    • November 2021
    • October 2021
    • July 2021
    • June 2021
    • May 2021
    • March 2021
    • February 2021
    • January 2021
    • December 2020
    • November 2020
    • October 2020
    • September 2020
    • May 2020
    • April 2020
    • March 2020
    • February 2020
    • January 2020
    • December 2019
    • August 2019
    • July 2019
    • June 2019
    • May 2019
    • April 2019
    • March 2019
    • January 2019
    • November 2018
    • October 2018
    • September 2018
    • June 2018
    • April 2018
    • March 2018
    • November 2017
    • September 2017
    • August 2017
    • July 2017
    • June 2017
    • May 2017
    • March 2017
    • February 2017
    • January 2017
    • November 2016
    • October 2016
    • September 2016
    • August 2016
    • July 2016
    • June 2016
    • May 2016
    • March 2016
    • February 2016
    • January 2016
    • December 2015
    • November 2015
    • September 2015
    • August 2015
    • July 2015
    • June 2015
    • May 2015
    • April 2015
    • March 2015
    • February 2015
    • January 2015
    • December 2014
    • November 2014
    • October 2014
    • July 2014
  • Categories

    • No categories
© 2025 SAP SE. All rights reserved.
  • Privacy
  • Legal Disclosure
  • Copyright
  • Terms of Use
  • Go.SAP.com
  • SAP Community Network

The SAP Fiori Design Guidelines will soon be moving to the new SAP Design System portal. Check out the new experience here.

We'd appreciate your feedback!

Processing your feedback

Thank you Your feedback has been sent to the SAP Fiori design team.

Thank you for your helping us to improve our guidelines!

 
We'd appreciate your feedback!
Please fill out the form to send us your feedback.
    • Can you tell us why?

Your feedback is anonymous, so you won't receive a reply. If you'd like help with a specific question, please visit the SAP Fiori Community