Show TOC

Implementing a Custom Tile TypeLocate this document in the navigation structure

You can implement a custom tile type.

Context

The following steps provide an overview of the procedure.

Procedure

  1. Implement the tile logic and UI as a SAPUI5 view. For more information, see Views.
  2. Consume framework services (contracts) as required; for example, to access the configuration of a tile instance.
    The following contracts are supported:
    Contract Use
    bag Access property bags, and read or write properties in these bags. The properties in these bags will be translated and retain personalization.
    configuration Get property values.
    writeConfiguration Set property values.
    configurationUi Provide a tile-specific configuration UI and related functionality.
    preview Display a tile in preview mode.

    The preview contract is mandatory.

    refresh Handle refresh events.
    search Provide tile-specific search keywords, and highlight search terms in the UI.
    url Convert relative URLs into absolute ones, and return the tile catalog's system.
    visible Handle the visibility of a tile in a page.
    Note For more information, see Accessing the CHIP API and the contracts.
  3. To access instance-specific tile contracts from the view controller, use code such as the following:
    (function () {
      "use strict";
     
      sap.ui.controller("someController", {
        onInit: function () {
          var oChipApi = this.getView().getViewData().chip;
          ...
        },
        ...
      });
    }());
    
  4. Create a descriptor file (chip.xml) for the new tile type.
    For more information, see CHIP Definition XML.
  5. To expose the new tile type in the Fiori launchpad designer, the administrator needs to register the type in the ABAP Frontend server. For more information, see Assigning a CHIP to the Universal Fiori Launchpad Catalog.