Extending Delivered Apps Using Adaptation Extensions

Extending Delivered Apps Using Adaptation Extensions

You can extend delivered apps based on SAP Fiori elements by using the SAPUI5 Visual Editor in SAP Web IDE.

Context

You can implement extensibility functions as part of a UI adaptation project by using the SAPUI5 Visual Editor in SAP Web IDE. The adaptation project references the applications delivered by SAP as base or parent applications.

Note

This procedure is relevant only for list reports, object pages, overview pages, and analytical list pages.

The flexible column layout is not supported by the SAPUI5 Visual Editor in SAP Web IDE.

You can use adaptation extensions for these extensibility points:

  • List report and analytical list page

    • Add additional fields to the smart filter bar

    • Add additional columns to tables

    • Add additional table toolbar buttons and extension controller logic

    • Override extensibility functions

      • onInitSmartFilterBar

      • provideExtensionAppStateData

      • restoreExtensionAppStateData

      • ensureFieldsForSelect

      • addFilters

    Adaptation Extension Options in the List Report

  • Object page

    • Global actions

    • Additional sections

    • Add additional fields to the header facet

    • Add additional fields and field groups to forms

    • Override extensibility functions

      • provideExtensionStateData

      • restoreExtensionStateData

      • ensureFieldsForSelect

      • addFilters

    Adaptation Extension Options on the Object Page

  • Overview page

    • Add additional fields to the smart filter bar

    • Add global actions to filter bar

    • Add additional extensions controller logic

    • Add cards

    • Clone cards

    • Edit cards

    • Override extensibility functions

      • provideExtensionAppStateData

      • restoreExtensionAppStateData

      • addFilters

      • provideStartupExtension

      • provideExtensionNavigation

      • provideCustomActionPress

      • provideCustomParameter

In SAP Web IDE, here's what you do:

Procedure

  1. Choose File New Adaptation Project .
  2. Enter the project name and the application title and choose Next.
  3. Select the system and the base application. Make sure you deselect Enable Safe Mode and choose Finish.

    The system generates the adaptation project in your workspace.

  4. Right-click your adaptation project and choose SAPUI5 Visual Editor.

    The system starts the editor. You can make your adaptations on the Edit tab page. For an example, see Adaptation Extension Example: Adding a Button to the Table Toolbar in the List Report.

    For information about adapting the UI in SAP Web IDE, choose Help Documentation Developing Developing Web Applications SAPUI5 Visual Editor .

    Note

    Please note that this topic is currently only applicable to SAP Fiori elements for OData V2.