Terminology for SAP Fiori Elements

<div> <div></div> <div></div> </div> <div> <div> <h4 id="term">Term</h4> </div> <div> <h4 id="explanation">Explanation</h4> </div> </div> <div> <div> <h4 id="action-placementidea-wall">Action Placement<span class="icon icon-idea-wall"></span></h4> </div> <div> <p><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Ffoundations%2Fbest-practices%2Fglobal-patterns%2Faction-placement">Action placement</a></p> <p>is an important focus in design. You place the action as close to the information that it acts upon so users find them where they need them.</p> <p><span class="icon icon-alert"></span>However, because the SAP Fiori elements framework determines where the action is displayed, application developers do not specify the placement with annotations.</p> <p>For example, they may not be familiar with what you mean by a “finalizing action” in a list report. To implement this type of action, they use the annotation property <code>determining=true</code>.</p> <p>Below, you can find additional examples of the differences between designer terminology for actions and how the application developers implement them.</p> <table> <tbody> <tr> <td>Design Terminology</td> <td>Application Development Annotations</td> </tr> <tr> <td>A finalizing action that leaves the current state or navigates away from the page.</td> <td><code>Determining = true</code></td> </tr> <tr> <td> <p>An action in a table row or line item that:</p> <ul> <li>Affects an individual table row or line item.</li> <li>Triggers functionality or toggle states.</li> </ul> </td> <td><code>Inline = true</code></td> </tr> <tr> <td> <p>A table action that:</p> <ul> <li>Affects the table.</li> <li>Is displayed in the table toolbar</li> </ul> </td> <td> <p><code>Determining = false</code></p> <p>False is the default value for the property.</p> </td> </tr> <tr> <td> <p>A global action in the toolbar header that</p> <ul> <li>Changes a state or mode</li> <li>Opens other related apps or tools</li> </ul> </td> <td>Not applicable. Implementation requires an extension.</td> </tr> </tbody> </table> </div> </div> <div> <div> <h4 id="annotationssource-code">Annotations<span class="icon icon-source-code"></span></h4> </div> <div> <p>Application developers configure the required controls and their behavior with annotations that provide information about the application data.</p> <p>For example, annotations and their properties control the:</p> <ul> <li>Display and position of columns in a table</li> <li>Sort order for the table rows</li> <li>Measures, dimensions, and sort order in a chart</li> <li>Enablement of a navigation button always or only after the user has selected an item</li> </ul> <p>Application developers can also configure the required controls and their behavior through the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23manifest-">manifest file</a>.</p> </div> </div> <div> <div> <h4 id="app-statessource-code">App States<span class="icon icon-source-code"></span></h4> </div> <div> <p>App states include the:</p> <ul> <li>Inner app (iApp) state for navigating within the application</li> <li>External app (xApp) state for navigating from one app to another</li> </ul> <h4 id="iapp-state">IApp State</h4> <p>When a user navigates within an application, the iApp state stores all the information to retrieve for a specific URL when the user returns to it, for example:</p> <ul> <li>Filters applied</li> <li>Visible table columns</li> <li>Sort orders applied</li> </ul> <p>The user can return to the URL via</p> <ul> <li>A refresh</li> <li>Back navigation</li> <li>A tile created with <em>Save as Tile</em></li> <li>A link shared with <em>Send email</em></li> </ul> <h4 id="xapp-state">XApp State</h4> <p>When a user navigates from one source app to another target app, the xApp state stores all the information from the source app to pass the target app, for example:</p> <ul> <li>Filter values</li> <li>Values of the fields in the selected rows</li> <li>Page context</li> <li>Sort order of the table in the source app</li> <li>Other aspects of the presentation</li> </ul> <p>Also see: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23navigation-internal-external-outbound-inbound-">Navigation</a></p> </div> </div> <div> <div> <h4 id="asynchronous-actionssource-code">Asynchronous Actions<span class="icon icon-source-code"></span></h4> </div> <div> <p>Actions that the backend can execute sometime after the users initially trigger it.</p> <p>Users can continue to work on the UI without any interruption to their flow.</p> <p>Also see: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23synchronous-actions-">Synchronous Actions</a></p> </div> </div> <div> <div> <h4 id="column-in-a-tableidea-wall">Column in a Table<span class="icon icon-idea-wall"></span></h4> </div> <div> <p><span class="icon icon-alert"></span>Application developers probably know this term, but may not connect it with the annotations required for columns.</p> <p>To configure a table, application developers use the <code>LineItem</code> annotation and the <code>datafield</code> property, where each property displays as a column in the table.</p> <p>For more information, you can refer them to <a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Ftopic%2Ff0e1e1743bef4f519c34025ad4351f77">Defining Line Items</a>.</p> </div> </div> <div> <div> <h4 id="content-switchesidea-wall">Content Switches<span class="icon icon-idea-wall"></span></h4> <p>Icon tab bar<br>Segmented button<br>Select control</p> </div> <div> <p>These design terms may not be meaningful to developers because they don’t specify the UI control that lets the user switch among views in a list report.</p> <p>Instead, the SAP Fiori elements framework automatically renders the switch control based on the number of business objects shown in the views and the number of views:</p> <table> <tbody> <tr> <td>Content Switch</td> <td>Number of Business Objects</td> <td>Number of Views</td> <td>Example</td> </tr> <tr> <td>Segmented button</td> <td>1</td> <td>3 maximum</td> <td> <p>Business object: sales orders</p> <p>Each view shows the sales orders prefiltered according to a different status: draft, estimated, ordered, packed, delivered, completed</p> </td> </tr> <tr> <td>Select control</td> <td>1</td> <td>4 or more</td> <td> <p>Business object: sales orders</p> <p>Each view shows the sales orders prefiltered according to a different status: draft, estimated, ordered, packed, delivered, completed</p> </td> </tr> <tr> <td>Icon tab bar</td> <td>More than 1</td> <td>More than 1</td> <td> <p>Business objects: customers, deliveries, invoices, payments</p> <p>The list report shows a customer overview where each view shows the deliveries, invoices and payments.</p> </td> </tr> </tbody> </table> <p>For more information, see <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-content-area-fiori-elements">List Report – Content Area</a>.</p> </div> </div> <div> <div> <h4 id="entitysource-code">Entity<span class="icon icon-source-code"></span></h4> </div> <div> <p>An entity in a data model corresponds to a business object in an application.</p> <p>For example, for a sales order processing application, the sales order is an entity and the sales order item is its child entity in the data model.</p> <p>This parent-child association in the data model lets users navigate from the sales order to the sales order item in the application interface.</p> </div> </div> <div> <div> <h4 id="facetdisconnected">Facet<span class="icon icon-disconnected"></span></h4> </div> <div> <p>As a designer, you use the word facet for a UI element</p> <p><strong>specific to the object page header</strong></p> <p>.</p> <p><span class="icon icon-alert"></span>Developers use the word facet <strong>more generically</strong> to describe a unit for building for the object page so don’t be surprised to hear application developers speaking about “facets” for parts of the object page outside of the header.</p> <p>For example, they use the annotation <code>ReferenceFacet</code> for what designers call a subsection and <code>CollectionFacet</code> for a section that contains all the subsections.</p> <p>When you talk to application developers about a “facet,” specify where you want it to display.</p> </div> </div> <div> <div> <h4 id="manifestsource-code">Manifest<span class="icon icon-source-code"></span></h4> </div> <div> <p>The main configuration file for an application where application developers define settings for the application and the interface behavior.</p> <p>For example, in the manifest, an application developer can configure:</p> <ul> <li>A filter field to be displayed on the UI as both a compact filter field in the filter bar and a visual filter.</li> <li>A table to allow the selection of one or more table rows.</li> </ul> <p>Application developers can also configure the required controls and their behavior through <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23annotations-">annotations</a>.</p> </div> </div> <div> <div> <h4 id="navigation-internal-external-outbound-inboundsource-code">Navigation: Internal, External, Outbound, Inbound<span class="icon icon-source-code"></span></h4> </div> <div> <ul> <li>Internal navigation</li> </ul> <p>Navigation within an app — for example, from a list report to an object page to a subobject page: The application uses an <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23iapp-state">inner app (iApp) state</a> to store the page state and context and <strong>restore</strong> the same page state and context:</p> <ul> <li> <ul> <li>After users navigate away from the page and, then, return to it with a back navigation.</li> <li>When users go to the page from a tile created with <em>Save as Tile</em> or from a link shared with <em>Send email.</em></li> </ul> </li> <li>External navigation</li> </ul> <p>Navigation across applications — for example, from Managing Sales Orders to Managing Deliveries — uses the <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23xapp-state">external app (xApp) state</a> to pass the context from the source app to the target app.</p> <p>Just as an outbound train leaves the station and an inbound train arrives at the station:</p> <ul> <li> <ul> <li>Outbound navigation is when the user leaves an analytical list page, list report or object page in the current app for another app.</li> <li>Inbound navigation is when the user arrives at the analytical list page, list report, or object page in the current app from another app.</li> </ul> </li> </ul> </div> </div> <div> <div> <h4 id="odata-servicessource-code">OData Services<span class="icon icon-source-code"></span></h4> </div> <div> <p>OData (Open Data Protocol) is a standard protocol used by the backend to communicate with the user interface.</p> <p>OData services deliver one or more functionalities or capabilities on the backend system, such as the retrieval of data or execution of a series of actions. The code for the services can be reused for various purposes by different client applications.</p> <p>SAP Fiori elements support different versions of OData, as their names indicate:</p> <ul> <li>SAP Fiori elements for OData version 2 (V2)</li> <li>SAP Fiori elements for OData version 4 (V4)</li> </ul> </div> </div> <div> <div> <h4 id="paginator-buttonssource-code">Paginator Buttons<span class="icon icon-source-code"></span></h4> </div> <div> <p>Known by designers as paging buttons (<span class="icon icon-navigation-up-arrow"></span> <span class="icon icon-navigation-down-arrow"></span>) in the object page header toolbar, they let users navigate to the previous or next object page shown in the list report.</p> <p>For more information, see: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fui-elements%2Fheader-toolbar%2F%23paging-layout">Header Toolbar</a></p> </div> </div> <div> <div> <h4 id="sectionidea-wall">Section<span class="icon icon-idea-wall"></span></h4> </div> <div> <p><span class="icon icon-alert"></span>This designer term may not be meaningful to some application developers because they do not use it in their annotations.</p> <p>Instead, to build an object page section, application developers use different types of facet annotations. They start with a <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23facet-">facet</a>, add a reference facet, and add other controls for a form, table, or chart.</p> <p>For more information, you can refer them to <a href="https%3A%2F%2Fhelp.sap.com%2Fviewer%2FDRAFT%2F96880755e4e64fcd96c12694f430fece%2FInternal%2Fen-US%2Ffacfea09018d4376acaceddb7e3f03b6.html">Defining and Adapting Sections</a>.</p> </div> </div> <div> <div> <h4 id="semantic-key-fieldsource-code">Semantic Key Field<span class="icon icon-source-code"></span></h4> </div> <div>This field is the unique identifier for an object used by the search to find the object.</div> </div> <div> <div> <h4 id="sideeffectssource-code">SideEffects<span class="icon icon-source-code"></span></h4> </div> <div> <p>When a user edits an object, changes to the object can impact other object properties.</p> <p>For example, in an employee record, changing the value for <em>City</em> in the employee address makes the value in the <em>State</em> or <em>Region</em> field invalid.</p> </div> </div> <div> <div> <h4 id="smart-controls-and-control-librarysource-code">Smart Controls and Control Library<span class="icon icon-source-code"></span></h4> </div> <div> <p>These UI controls can read both the data from the backend and the annotations on that data.</p> <p>Consequently, they take the annotations into account in their rendering and behavior.</p> <p>For example, a smart field isn’t displayed on the UI if it’s marked with the annotation to hide it, <code>UI.Hidden</code>.</p> <p>SAP Fiori elements for OData V2 uses smart controls.</p> <p>SAP Fiori elements for OData V4 uses a different control library.</p> </div> </div> <div> <div> <h4 id="synchronous-actionssource-code">Synchronous Actions<span class="icon icon-source-code"></span></h4> </div> <div> <p>An action that the backend executes immediately after the users trigger it and, thus, blocks them from performing other actions on the interface until the execution is complete.</p> <p>Also see: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-112%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Fterminology-sap-fiori-elements%23asynchronous-actions-">Asynchronous Actions</a></p> </div> </div> <div> <div> <h4 id="textarrangementsource-code">textArrangement<span class="icon icon-source-code"></span></h4> </div> <div> <p>An annotation property that controls the display of text associated with an ID field, such as country and country code. It can set the display of:</p> <ul> <li>Only the text: Germany</li> <li>First the text, then the ID: Germany (001)</li> <li>First the ID, then the text: 001 (Germany)</li> </ul> </div> </div>