Discover / Frameworks / SAP Fiori Elements / Find Information and Get, Help
Intro
Here, you will find selected information assets to help you:
Get familiar with SAP Fiori elements
Better communicate with application developers
Stay current on new features
<div> <div></div> </div> <div> <div>This article is available internally only. The same is true of many of its links. We’ve labelled the links available externally, so you can share them with customers and partners.</div> </div>
information
We assume that you are already familiar with the floorplans, patterns, and UI elements in the SAP Fiori Guidelines for the web.
Technical Basics
SAP Fiori elements form a framework that provides the most common floorplans as templates, including interaction patterns. The framework generates the user interface (UI) automatically so application developers are spared the effort of coding it.
Instead, application developers configure the templates with annotations, so that the framework knows how to generate the UI.
Annotations specify, for example:
The business objects handled, such as a purchase order or product
The actions that the user can perform on a business object, such as edit or delete
The features available, such as the display of header facets in an object page or use of a tab bar instead of anchors
When generating the UI, the SAP Fiori elements framework fetches data from the backend system to use in the template, with the OData protocol. The OData protocol also sends the users’ input from the UI to the backend system.
In the backend system, business objects, their data, and their supported actions are implemented and managed.
SAP Fiori Elements Versions
Each version of SAP Fiori Elements corresponds to a version of the OData protocol:
SAP Fiori elements for OData V4 is the latest version and used for all new apps
SAP Fiori elements for OData V2
Beyond the Templates
You may have learned from designing for applications developed with SAP Fiori elements that application developers cannot always configure the templates to match your design.
To bring your design to life beyond what the templates allow, application developers can extend the UI by:
Creating custom code for parts of an SAP Fiori element
Adding a freestyle page, using the SAP UI5 framework
<div> <div></div> </div> <div> <div> <p>Implementing a design sometimes means finding the right balance among simple configuration, custom coding portions of a page, or even coding an entire freestyle page.</p> <p>Collaborate with your product management, and development team to hit the sweet spot: What’s the best possible user experience you can deliver within the given time, resources, and budget constraints?</p> </div> </div>
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint
How to Get Started
Discover introductory assets for SAP Fiori elements.
Learn the technical basics with training.
Dive deeper into documentation and community participation.
Discover
We’ve collected the following introductory assets and recommend you consume them in the following order:
SAP Fiori elements flexible programming model for SAP Fiori elements for OData V4 (video 30:53 minutes) In this video (starting at 5:50), the presenters introduce you to what can be configured in the SAP Fiori elements framework and what is possible with custom coding.
Learn with TechUP Training
For an overview of the SAP Fiori elements technology and some guided, hands-on practice with the framework, choose the TechUp training.
It’s designed for and taught by experts in design who present information at the right technical level for you.
You’ll learn about:
HTML, CSS, JavaScript
Cloud computing
SAPUI5
SAP Fiori elements
You will:
Create a simple SAP Fiori elements app on your own, using SAP Fiori tools.
Gain an overview of test and demo systems, and how to access them.
<div> <div></div> </div> <div> <div>If you’re eager to create a simple SAP Fiori elements app with SAP Fiori tools, go directly to the tutorial: <a href="https%3A%2F%2Fdevelopers.sap.com%2Fgroup.fiori-tools-lrop.html">Create a List Report – Object Page App</a>.</div> </div>
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint
Interested?
Go the Cloud ERP User Experience SharePoint to learn more about the TechUP! content, duration, and how to request the training.
New cohorts are organized based on the requests received.
Dive Deeper
For a deeper understanding of SAP Fiori elements or an answer to a specific question:
Start with the Fiori Design Community, where you can search the answers to the questions and design issues that your colleagues have submitted previously.
Otherwise, just post your question. For more information, see Communities.
Finally, stay up to date on changes and subscribe to the SAP Fiori elements newsletter, for example. For more information, see the Stay Current section.
Help Yourself
The following tables provide self-contained information assets, including recommendations for sections beneficial for designers.
The sources targeted at developers contain many code examples. You don’t need to understand the coding detail, but a basic understanding will help you communicate with developers.
The table below links to official sources of information that are available to customers and partners.
<div> <div>Official Source</div> <div>Main Target Group</div> <div>Description</div> <div>When to Use It</div> <div>Tips</div> </div> <div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Finternal%2Ffiori-design-web%2F">SAP Fiori Design Guidelines</a> ></p> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fsmart-templates">SAP Fiori Elements Framework</a></p> </div> <div>UX Designers</div> <div> <ul> <li>Documents available features for each SAP Fiori element and its default setting</li> <li>Structures the features according to the layout of a floorplan so it’s meaningful to designers</li> <li>Mentions differences between SAP Fiori elements for OData V2 and V4, when they exist</li> <li>Links to developer documentation to support your communication with developers</li> </ul> </div> <div>Start here to learn about supported features.</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements">Terminology (SAP Fiori Elements)</a> terms that may cause misunderstanding between designers and developers.</div> </div> <div> <div>SAP UI5 Demo Kit > Documentation > <a href="https%3A%2F%2Fui5.sap.com%2F%23%2Ftopic%2F03265b0408e2432c9571d6b3feb6b1fd">Developing Apps with SAP Fiori Elements</a></div> <div>Application Developers</div> <div> <p>Part of the official SAP UI5 documentation, this source:</p> <ul> <li>Lists all the available features in the SAP Fiori elements feature map</li> <li>Documents their development with both versions of SAP Fiori elements</li> </ul> </div> <div> <p>Find out the features supported for an SAP Fiori element.</p> <p>You can search and sort the <a href="https%3A%2F%2Fui5.sap.com%2F%23%2Ftopic%2F62d3f7c2a9424864921184fd6c7002eb">SAP Fiori Elements Feature Map</a> table to locate the information you need.</p> </div> <div> <p>Also see the:</p> <ul> <li>Introductory sections, especially <a href="https%3A%2F%2Fui5.sap.com%2F%23%2Ftopic%2F0a5377076f4e4ccba055a9072befadbd">Why Use SAP Fiori Elements?</a></li> <li><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Ftopic%2Ff4817b73671a4fb7af785b8fdd59f8e8">FAQs</a></li> <li><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Ftopic%2F9ef211e569ed4f819af904ba360ea7f6">Glossary</a>, to better understand technical terms</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fui5.sap.com%2Ftest-resources%2Fsap%2Ffe%2Fcore%2FfpmExplorer%2Findex.html%23%2Foverview%2Fintroduction">Flexible Programming Model Explorer</a></div> <div>Application Developers</div> <div> <ul> <li>Applies only to SAP Fiori elements for OData V4</li> <li>Showcases how to extend or custom code applications developed with SAP Fiori elements.</li> </ul> </div> <div>Learn where developers can add extensions, see the <a href="https%3A%2F%2Fui5.sap.com%2Ftest-resources%2Fsap%2Ffe%2Fcore%2FfpmExplorer%2Findex.html%23%2FcustomElements%2FcustomElementsOverview">Extension Points</a> tab, for example, custom sections, actions, dialogs, columns, and pages.</div> <div> <p>SAP Fiori elements for OData V4 uses specific SAPUI5 controls, called metadata-driven controls (MDC).</p> <p>You can see them in action in the <a href="https%3A%2F%2Fui5.sap.com%2Ftest-resources%2Fsap%2Ffe%2Fcore%2FfpmExplorer%2Findex.html%23%2FbuildingBlocks%2FbuildingBlockOverview">Building Blocks</a> tab. Examples are forms, tables, filter bar, charts.</p> <p>MDC controls are based on SAPUI5 controls.</p> <p>They are also available in the SAPUI5 demo kit. For all MDC controls, go to <a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fcontrols">Samples</a> and enter <em>sap.ui.mdc</em> in the search field.</p> </div> </div>
Internal Only Sources
The table below links to sources of information that are available internally only.
<div> <div>Internal Only Source</div> <div>Main Target Group</div> <div>Description</div> <div>When to Use</div> <div>Tips</div> </div> <div> <div> <p>SAP S/4HANA Fiori Expert Network ></p> <p><a href="https%3A%2F%2Fsap.sharepoint.com%2F%3Af%3A%2Fr%2Fteams%2FS4HANAFioriExpertNetwork%2FShared%2520Documents%2FFiori%2520Expert%2520Network%2520Meeting%2FFioriUXGuidelines%2FFioriElements%3Fcsf%3D1%26web%3D1%26e%3Dk7e9l6">SAP Fiori Elements</a></p> <p>(SharePoint)</p> </div> <div>Developers in SAP S/4HANA</div> <div>Contains the standard slide decks for SAP Fiori elements for OData V2 and V4, including, previous versions of the decks.</div> <div> <p>See the slide decks to understand how developers learn about SAP Fiori elements and the programming model:</p> <ul> <li>SAP Fiori elements for OData V4 including custom code options and differences between V2 and V4</li> <li>SAP Fiori elements V2</li> </ul> </div> <div></div> </div> <div> <div> <p>SAP Fiori Technology > <a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Ffioritech%2FSAP%2BFiori%2Belements">SAP Fiori elements</a></p> <p>(Wiki)</p> </div> <div>Teams who develop SAP Fiori apps</div> <div> <p>Cross-unit program for SAP Fiori, including SAP Fiori elements.</p> <p>Contains links to the developer guide, user assistance, quality and testing, roll-out and go-to-market information.</p> </div> <div>To find out SAP Fiori elements contact names, such as CPO, APO, architects, user assistance, marketing.</div> <div>In the Important Links section, use the <a href="https%3A%2F%2Fjira.tools.sap%2Fsecure%2FRapidBoard.jspa%3FrapidView%3D2776%26view%3Dplanning.nodetail%26issueLimit%3D100">Fiori Elements Jira</a> link to check what’s planned for the current and upcoming releases.</div> </div>
Communities
Except for SAP Fiori Design Community, these sources of information are ones to refer application developers to.
<div> <div>Source</div> <div>Main Target Group</div> <div>Description</div> <div>When to Use</div> </div> <div> <div> <p><a href="https%3A%2F%2Fworkzone.one.int.sap%2Fsite%23workzone-home%26%2Fgroups%2F4nHIPjvAMWYhZrTqKELfT3%2Fworkpage_tabs%2F0BKXhLl6rmiS17pNtahizh">Fiori Design Community</a></p> <p>(Work Zone)</p> </div> <div>Designers</div> <div>A managed community for designers of SAP Fiori apps</div> <div> <p>For answers to your design questions, including:</p> <ul> <li>Those related to SAP Fiori elements</li> <li>Requests for clarification when a guideline is unclear or doesn’t address your question</li> </ul> </div> </div> <div> <div> <p><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fx%2FirRiYg">Center of Expertise</a></p> <p>(Wiki)</p> </div> <div>Developers</div> <div> <p>Centers of Expertise are a group of developers with expertise in a specific area whom you can contact for technical consulting.</p> <p>Not restricted to SAP Fiori elements, the experts also cover SAPUI5, gateway, development infrastructure, ABAP development.</p> </div> <div>As a source for expert advice on implementing your design that you can refer application developer to</div> </div> <div> <div> <p><a href="https%3A%2F%2Fgithub.wdf.sap.corp%2Ffiori-elements%2Fv4-consulting">Consulting for V4</a></p> <p>(Github)</p> </div> <div>CoE Developers</div> <div>Managed by SAP Fiori elements development, this site lets you submit issues or questions about the behavior of existing features for immediate assistance.</div> <div>As a source for expert advice on implementing your design that you can refer application developer to</div> </div> <div> <div> <p><a href="https%3A%2F%2Fsap.stackenterprise.co%2Fquestions%2Fask">Stack Community</a></p> <p>(Stack@SAP)</p> </div> <div>Developers</div> <div> <p>A managed community for all SAP developers and other roles.</p> <p>Use tags to send your questions to the right experts and to find questions and articles relevant to your concern</p> <p>Tags to use:</p> <ul> <li>fiori-elements</li> <li>fiori-elements-v2</li> <li>fiori-elements-v4</li> <li>s4hana-design</li> </ul> </div> <div>As a source for expert advice on implementing your design that you can refer application developer to</div> </div>
Stay Current
To stay current, use the following:
The monthly SAP Fiori Elements Newsletter from development informs you of new features for SAP Fiori elements for OData V2 and V4. Join the distribution list here
