Skip to Content

Customize the Wizard Generated Application

Customize a wizard-generated application and learn how to use Fiori object cells, search UI, and the collection view.
You will learn
  • How to customize the values displayed in an object cell
  • How to modify the navigation between screens
  • How to change menu options
  • How to add a Fiori search UI enabling the filtering of object cells on a list screen
  • How to add a collection view showing the top products

Prerequisites

  • Step 1
    1. Run the previously created project.

    2. Tap the Products entity.

      Entities screen

      Notice that it displays the category name rather than the product name.

      Original Products Screen

      The category name is displayed (rather than the product name) because the app was generated from the OData service’s metadata, which does not indicate which of the many fields from the product entity to display. When creating the sample user interface, the SDK wizard uses the first property found as the value to display. To view the complete metadata document, open the res/raw/com_sap_edm_sampleservice_v2.xml file.

      Product metadata

      Each product is displayed in an object cell, which is one of the Fiori UI for Android controls.

      object cell

      As seen above, an object cell is used to display information about an entity.

    What effect does the `masterPropertyName` have on the entity list screen?

  • Step 2

    In this section, you will configure the object cell to display a product’s name, category, description, and price.

    Which properties of the object cell were set in this section?

  • Step 3

    Examine the ProductCategories screen.

    Original product categories screen

    In this section, you will update the screen’s title, configure the object cell to show the category name, main category name, add the number of products in a category, and add a separator decoration between cells.

  • Step 4

    In this section, you will modify the app to initially show the Product Categories screen when opened. Selecting a category will navigate to a Products screen for the selected category. The floating action button on the Categories screen will be removed.

  • Step 5

    In this section you will add a search field to ProductCategoriesListActivity, enabling a user to filter the results displayed on the product category screen.

    Further information on the Fiori search UI can be found at SAP Fiori for Android Design Guidelines and Fiori Search User Interface.

  • Step 6

    In this section, you will add a Top Products section to the Products screen, which displays the products that have the most sales, as shown below.

    Collection View on Products Screen

    First, we’ll generate additional sales data in the sample OData service.

    Congratulations! You have now made use of SAP Fiori for Android and have an understanding of some of the ways that the wizard-generated application can be customized to show different fields on the list screens, add or remove menu items, perform a search, and use a collection view.


Back to top