Getting Started with SAP Fiori elements: Turning OData into Applications

00:04:32
https://www.youtube.com/watch?v=m7MCzYrUXyA

摘要

TLDRIn this video, the transformation of OData and annotations into SAP Fiori apps is explained. It discusses how SAP UI5 and XML views are utilized to create application screens, with annotations defining the structure and behavior of the data. The process involves using XML view templates to generate the actual UI5 XML views, which are cached for faster loading. The video emphasizes the standardization of application behavior based on metadata and annotations, ensuring a consistent user experience across applications.

心得

  • 📊 OData structures data for SAP Fiori apps.
  • 📝 Annotations describe data usage in applications.
  • 🖥️ XML views define application screens in SAP UI5.
  • 🔄 Annotations transform into UI5 XML views using templates.
  • ⚡ Caching speeds up app loading times.
  • 🔧 Changes in metadata trigger re-transformation.
  • 🖱️ Buttons like create/delete are rendered based on annotations.
  • 🎨 Standardized views ensure a consistent look and feel.
  • 🔄 Simplified app creation and updates enhance user experience.

时间轴

  • 00:00:00 - 00:04:32

    In this video, the presenters explain how OData and annotations transform into SAP Fiori apps. They begin by discussing SAP UI5 and XML views, which are essential for defining application screens. The presenters illustrate how Line Item annotations specify table columns, leading to the creation of UI5 XML views through templates. The transformation process is efficient, utilizing a view cache to enhance performance by storing results in the browser. They emphasize that this transformation occurs only once unless there are changes to OData metadata or annotations. The video concludes by highlighting that SAP Fiori elements standardize the interpretation of metadata and annotations, impacting both the visual and behavioral aspects of applications, ultimately providing a consistent user experience.

思维导图

视频问答

  • What is the role of OData in SAP Fiori apps?

    OData provides structure to the data used in SAP Fiori elements applications.

  • How are annotations used in SAP Fiori apps?

    Annotations describe how the data should be used in the applications.

  • What are XML views in SAP UI5?

    XML views allow developers to define the individual screens of their applications and bind UI5 controls to data.

  • How does SAP Fiori elements ensure a consistent look and feel?

    Changes are made centrally in templates, ensuring all applications have a consistent and up-to-date appearance.

  • Does the transformation from annotations to XML views happen every time the app is opened?

    No, it uses a view cache feature to store the result, speeding up subsequent openings.

  • What happens if OData metadata or annotations are modified?

    The transformation will occur again if there are changes to the metadata or annotations.

  • How does the application behavior relate to annotations?

    Annotations also dictate application behavior, such as rendering create or delete buttons based on the metadata.

  • What is the benefit of using standardized XML views?

    They simplify the creation and updating of apps, providing the best user experience.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要！
字幕
en
自动滚动:
  • 00:00:02
    In a previous video, you learned about the roles played by OData and annotations
  • 00:00:07
    in creating SAP Fiori apps with SAP Fiori elements.
  • 00:00:11
    In this video, my colleague Thorsten and I are going to explain to you
  • 00:00:14
    how that OData and those annotations actually become apps.
  • 00:00:18
    My colleagues described how OData provides structure
  • 00:00:22
    to the data used in SAP Fiori elements applications
  • 00:00:25
    and how annotations describe how that data should be used.
  • 00:00:30
    Let me walk you through
  • 00:00:31
    how those annotations become apps.
  • 00:00:34
    To get started,
  • 00:00:35
    we have to talk a little bit about SAP UI5 and XML views.
  • 00:00:40
    SAP UI5 allows developers to define the individual screens of their applications
  • 00:00:45
    using what are called XML views.
  • 00:00:48
    SAP Fiori applications use XML views
  • 00:00:51
    for arranging the UI5 controls on screen and binding them to the data.
  • 00:00:56
    The actual XML can be written by hand or using a visual editor.
  • 00:01:00
    Here you can see some Line Item annotations that are being used to define
  • 00:01:04
    the columns of a table control.
  • 00:01:06
    They are somewhat simplified for space constraints,
  • 00:01:10
    but still illustrate the concept.
  • 00:01:13
    Based on these annotations,
  • 00:01:14
    you can tell that the table is meant to have three columns:
  • 00:01:18
    Sales Order Item, Material, and Requested Quantity.
  • 00:01:23
    The transformation of these annotations into an actual UI5 XML view is done
  • 00:01:28
    using XML view templates –
  • 00:01:31
    known as the page types or floorpans in SAP Fiori elements.
  • 00:01:37
    We have summarized some of the most commonly used page types
  • 00:01:41
    in previous videos from this series.
  • 00:01:44
    Now within these XML view templates,
  • 00:01:47
    we use instructions like template:repeat to go over the annotations
  • 00:01:51
    and define what the actual XML will be.
  • 00:01:55
    Here is a simplified example that defines the header
  • 00:01:58
    and data for column control.
  • 00:02:01
    The SAP UI5 XML pre-processor
  • 00:02:04
    now takes the annotations and the template
  • 00:02:08
    and creates the actual XML view.
  • 00:02:11
    The resulting view has one column control for each property that has been referred to in the line item annotation.
  • 00:02:19
    This SAP UI5 view created with SAP Fiori elements does not differ from any freestyle-developed UI5 view
  • 00:02:27
    and has all of the same standard capabilities, such as UI adaptation.
  • 00:02:34
    Changes are done centrally in the templates.
  • 00:02:37
    So all applications developed with SAP Fiori elements
  • 00:02:40
    will always have a consistent up-to-date look and feel.
  • 00:02:46
    You may wonder if this transformation from annotations into XML views
  • 00:02:50
    occurs every time user opens the application.
  • 00:02:55
    The answer is no.
  • 00:02:56
    SAP Fiori elements uses SAPUI5's view cache feature to store
  • 00:03:01
    the result of this transformation in the browser,
  • 00:03:04
    so it only occurs the very first time the application started.
  • 00:03:09
    The next time the application started,
  • 00:03:12
    it will simply run the previously stored result of the transformation and therefore start significantly faster.
  • 00:03:19
    If either the OData metadata or annotations are modified
  • 00:03:24
    or the user experience has been redefined, this transformation will occur again.
  • 00:03:30
    I'm now going to hand it over to my colleague Marcel,
  • 00:03:33
    who is going to talk about how this process plays into application behavior.
  • 00:03:38
    The process of turning annotations into XML views
  • 00:03:41
    is not only used for visuals, but also for the behavior of your application.
  • 00:03:45
    SAP Fiori elements standardizes how metadata and annotations are interpreted.
  • 00:03:51
    Let's use the example of Thorsten showing sales order items in a table.
  • 00:03:55
    If it's creatable, a create button is rendered.
  • 00:03:57
    If it's deletable, a delete button is rendered –
  • 00:04:00
    already connected to the controllers implementing this action.
  • 00:04:03
    To sum up what we covered in this video:
  • 00:04:05
    SAP Fiori elements converts OData and annotations provided by you
  • 00:04:09
    into standardized XML views actually seen by your users.
  • 00:04:14
    Those standardized XML views make it simple to create and update apps
  • 00:04:18
    and to deliver the most up-to-date and best-possible user experience to your users.
标签
  • OData
  • Annotations
  • SAP Fiori
  • SAP UI5
  • XML Views
  • Application Behavior
  • Caching
  • User Experience
  • Standardization
  • Templates