DOCSEARCHbyAlgolia
Submit Docs

SAPUI5 Documentation

repository·main·Indexed 41 days ago

https://github.com/sap-docs/sapui5

Official documentation for the SAPUI5 framework, including the Demo Kit. Covers core components, OData V2 and V4 models, SAP Fiori elements, and specific API updates such as sap.ui.richtexteditor.RichTextEditor, sap.ui.comp.smarttable.SmartTable, and sap.ui.core.Configuration.

Tokens
196.1K
Snippets
401
Records
1.1K
Agent score
52%

What's inside SAPUI5

  2. Overview of the SAP Fiori Launchpad Sandbox

    main

    The SAP Fiori launchpad sandbox is a modernized implementation designed specifically for local application development and automated testing. It is not intended for productive use.

    Key features include:

    • Support for SAPUI5 1.x-legacy-free standards and modern bootstrap mechanisms.
    • Simplified local development and automated testing workflows.
    • A declarative configuration approach.
    • Out-of-the-box functionality with minimal setup.

  3. Overview of SAPUI5 Testing Tools and Strategies

    main

    The SAPUI5 testing ecosystem allows you to verify application functionality using several specialized tools and methodologies. This tutorial-based approach covers:

    • QUnit: Used for writing JavaScript unit tests to verify application logic.
    • OPA5 (One Page Acceptance tests): Used for integration/end-to-end testing of the UI.
    • OData V2 Mock Server: Used to simulate backend services for testing data-driven features.
    • Test Driven Development (TDD): A methodology where tests are written before the actual implementation to ensure high-quality, testable code.

    By implementing these tools, you can ensure high test coverage, prevent regressions during framework upgrades, and reduce the need for manual testing.

  4. Use Standard SAP Fiori Elements Floorplans

    main

    SAP Fiori Elements provides several standard floorplans tailored for different use cases:

    • List Report Page: Used for displaying large sets of data in a table, often with filtering capabilities. Supports multiple views (Single Table or Multiple Table modes).
    • Worklist Page: A simplified list view typically used for processing tasks or items requiring action.
    • Analytical List Page: Designed for data analysis, combining tables with visual elements like charts.
    • Object Page: Used to display detailed information about a single entity, organized into sections and facets.
    • Overview Page: Provides a high-level dashboard view with various cards to summarize information.

  5. Explore SAPUI5 Controls and Libraries

    main

    The SAPUI5 documentation provides detailed guides for various control libraries and specialized UI components. Key areas include:

    • Smart Controls: Includes Smart Table and Smart Variant Management (which supports Key User Adaptation).
    • Core Library (sap.ui.core): Contains fundamental elements like the Icon and Icon Pool.
    • Specialized Libraries:
      • sap.ui.mdc: Metadata Driven Controls.
      • sap.ui.richtexteditor: The RichTextEditor control.
      • sap.ui.table: Advanced table controls.
      • sap.ui.vk: Viewport and Scene Tree components, including the View Gallery and Viewer.
      • sap.uxap: UX Application patterns, specifically the Object Page Layout (including headers, anchor bars, and blocks).

    Refer to the specific library documentation to understand implementation details, properties, and events for each control.

  6. SAP Fiori Elements: New features in 1.84

    main

    SAP Fiori Elements received several updates in version 1.84:

    • Error Handling: Provides meaningful messages instead of technical error messages for e-tag mismatches.
    • Side Effects: Supports side effects in non-draft apps for own actions.
    • Value Help: Input fields with value help can be configured to show both text and ID together in Edit and Display modes of an object page.
    • Navigation: Allows passing multiple contexts for external navigation.
    • Table UX: List report and object page tables now provide a visual indication of the last opened row.

  8. Choose an SAPUI5 development environment

    main

    SAPUI5 can be developed on various platforms depending on your specific use case. Common environments include:

    • UI5 CLI: A Node.js-based command line toolchain for local development and building.
    • SAP Business Application Studio (BAS): A modular development environment provided as an SAP BTP service in the Cloud Foundry environment. It is specifically tailored for efficient business application development, including SAPUI5.
    • Custom JavaScript IDEs: You can use any JavaScript IDE of your choice for SAPUI5 development.

  9. Understand the Worklist App project structure

    main

    The initial project follows a standard SAPUI5 structure located within the webapp folder. Key components include:

    UI and Views

    • Home Page: Defined in webapp/view/Worklist.view.xml. It displays a product table with stock units, a search field in the header toolbar, and navigation to a detail page upon selecting a row.
    • Entry Points: The webapp/test.html file serves as a developer entry point to run the app in different modes (e.g., with the Mock Server or running unit/OPA tests).

    Data and Mocking

    • Mock Server: Configured in webapp/localService/mockserver.js. It allows the app to run without a network connection or a remote backend by serving mock data.
    • Metadata: The webapp/localService/metadata.xml file describes the OData service. The mock server uses this file to generate initial mock data.
    • Running with Mock Data: To use the mock server, you must access the app via webapp/test/mockServer.html in your browser.

    Configuration

    The webapp/manifest.json (App Descriptor) manages the application configuration:

    • sap.app section:
      • References the i18n.properties file for localized text.
      • Defines dataSources, specifically the mainService OData service. The URI here must match the rootUri defined in webapp/localService/mockserver.js for the mock server to function correctly.
    • sap.ui5 section:
      • rootView: Specifies the initial view to load (e.g., mycompany.myapp.MyWorklistApp.view.App).
      • Models: Defines models to be automatically instantiated. This includes the i18n model (pointing to webapp/i18n/i18n.properties) and the default model "" which is bound to the mainService OData 2.0 data source.

  10. Use Demo Kit improvements in SAPUI5 1.46

    main

    The SAPUI5 Demo Kit received several updates in version 1.46:

    • Theme Switching: You can now switch the Samples to the new High Contrast White theme via the Settings menu.
    • Reworked Landing Page: The Demo Apps landing page now categorizes apps and provides links to related tests and documentation.
    • New/Reworked Demo Apps:
      • Browse Orders: A master-detail application for browsing orders.
      • RTA (FLP): Demonstrates UI Adaptation at Runtime (RTA) using SAP Fiori 2.0 design and SAP Fiori launchpad features.
      • Shop Administrator: A renovated tool page demo showcasing controls from the sap.tnt, sap.ui.layout, and sap.suite.ui libraries.

  11. Overview of SAPUI5 Component Instantiation Mechanisms

    main

    SAPUI5 components can be instantiated using several different mechanisms depending on the use case. The primary modern methods are:

    • ComponentSupport Module: A declarative approach used for the initial application component.
    • Routing: Uses the manifest.json routing definition to create and render nested components based on navigation.
    • Component.create(): A modern, asynchronous static factory function for programmatic component creation. It returns a Promise and requires a ComponentContainer to render.
    • Component#createComponent(): An asynchronous instance method used to create a reuse component defined in an application component's manifest.json. It also requires a ComponentContainer to render.
    • ComponentContainer: A container element used to render components. It can load/instantiate components via manifest or accept programmatically created instances (from Component.create() or Component#createComponent()).

  12. Overview of ECMAScript restrictions in SAPUI5

    main

    While SAPUI5 supports modern ECMAScript up to and including ECMAScript 2023, there are specific restrictions to ensure compatibility with the SAPUI5 runtime and module loader.

    Key Restrictions:

    1. Module Loading: Do not use ECMAScript modules (import/export). Use sap.ui.define or sap.ui.require instead.
    2. Inheritance: Use ClassName.extend() for classes deriving from SAPUI5 classes. Use ES6+ classes only for non-SAPUI5 classes.
    3. Dependency Literals: Dependency names, class names, and library names must be string literals. Do not use variables, template literals with expressions, or spread elements in dependency lists.
    4. Async Modules: Do not use async functions or return Promises when defining SAPUI5 modules containing Controls, Components, Views, Fragments, or Controllers.
    5. Lifecycle Hooks: Do not use async functions when implementing predefined SAPUI5 lifecycle hooks (e.g., onInit, onExit).