SAP Learning Journey

Creating the UI Using the SAP Fiori Master-Detail Template

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Describe the built-in capabilities for SAP Fiori using SAP Cloud Application Programming Model project

Describing the Built in capabilities for SAP Fiori using SAP Cloud Application Programming Model project

Building UI is the last step in Application development and the one which is of high importance as this is where the User interaction takes place. Going back to the fundamentals of SAP Cloud Application Programming Model to avoid complexity of the Technical activities, CAP provides out-of-the-box support for SAP Fiori Elements frontends.

This gives a quick start and can be further enhanced to User needs, This enhancement is achieved by certain features provided by CAP which we will discuss in this unit.

The UI related Artifacts are developed and maintained under the app folder.

The UI generated by CAP as a quick start generally uses the metadata from the dataset, this fields are not always the ones that are required on the UI, as we need user friendly common terminology to help the adaptability of the solution , this is supplemented by the translation of the static data to make the application more dynamic with no language constraints.

SAP Fiori elements apps are generic frontends, which construct and render the pages and controls based on annotated metadata documents. The annotations provide semantic annotations used to render such content, for example:

As shown in the image we use Annotations for the CatalogService Entity Products with @ UI Then define the Selection Fields and the LineItems,the ones shown in the initial output.

We have seen in the unit for Domain Modelling the usage of i18n files for Localization of static texts, this is one the key elements for the enhancement. We use this as a reference as seen in the image above..

We use @odata.draft.enabled in the service file to enable draft for an entity exposed by a service.

Annotation Placement : Although Placement of Annotations can be added to the models with no constraints, it is recommended to place them in the app folder, in our example we have defined a new .cds file under the srv folder. Having a separate file for this requirements helps separating concerns and eases maintenance.

Using Built in capabilities for SAP Fiori Applications

DemoWatch Demo

Code File -Using Built in capabilities for SAP Fiori Applications

i18n.properties
Code snippet
Cat.TypeName=Product
Cat.TypeNamePlural=Products
Cat.ID=ProductID
Cat.ProductID=ProductID
Cat.ProductStock=In Stock
Cat.ProductPrice=Price
Cat.ProductTitle=Title
Cat.ProductDescr=Description
Cat.ProductImage=Image
Cat.SuppliersIdentifier=Name
Cat.SuppliersPostCode=City
Cat.SuppliersPhone=Phone

Cat.HeaderFacetDetails=Details
Cat.HeaderFacetSupplier=Supplier
Cat.HeaderPrice=Price

Cat.FacetProductInformation=Product Information
Cat.FacetSectionDescription=Description
Copy code
products.fiori.cds
Code snippet
using CatalogService as Prod from './cat-service';
annotate CatalogService.Products with @(
    UI: {
      HeaderInfo: {
        TypeName: '{i18n>Cat.TypeName}',
        TypeNamePlural: '{i18n>Cat.TypeNamePlural}',
        Title: { $Type: 'UI.DataField', Value: title }        
      },    
      SelectionFields: [ identifier, title, availability, price],      
      LineItem: [
       // {$Type: 'UI.DataField', Value: image_url},
        {$Type: 'UI.DataField', Value: identifier},
        {$Type: 'UI.DataField', Value: title},
        {$Type: 'UI.DataField', Value: availability},
        {$Type: 'UI.DataField', Value: price}
      ],
      HeaderFacets: [       
        {$Type: 'UI.ReferenceFacet', Target: '@UI.FieldGroup#ProductDetail', Label:'{i18n>Cat.HeaderFacetDetails}' },
        {$Type: 'UI.ReferenceFacet', Target: '@UI.FieldGroup#SupplierDetail', Label:'{i18n>Cat.HeaderFacetSupplier}' },
        {$Type: 'UI.ReferenceFacet', Target: '@UI.DataPoint#Price'}
      ],            
      Facets: [
        {
          $Type: 'UI.CollectionFacet',
          Label: '{i18n>Cat.FacetProductInformation}',
          Facets: [
            {$Type: 'UI.ReferenceFacet', Target: '@UI.FieldGroup#Description', Label: '{i18n>Cat.FacetSectionDescription}'},
          ]
        }
      ],
      DataPoint#Price: {Value: price, Title: '{i18n>Cat.HeaderPrice}'},
      FieldGroup#Description: {
        Data:[
            {$Type: 'UI.DataField', Value: description}
        ]
      },          
      FieldGroup#ProductDetail: {
        Data:[
          {$Type: 'UI.DataField', Value: identifier},
          {$Type: 'UI.DataField', Value: availability}
        ]
      },
      FieldGroup#SupplierDetail: {
        Data:[
          {$Type: 'UI.DataField', Value: supplier.identifier},
          {$Type: 'UI.DataField', Value: supplier.postCode},
          {$Type: 'UI.DataField', Value: supplier.phone}
        ]
      }
    }
);

annotate CatalogService.Products with {
  ID @( Common: { Label: '{i18n>Cat.ProductID}'} );
  availability @( Common.Label: '{i18n>Cat.ProductStock}' );
  price @( Common.Label: '{i18n>Cat.ProductPrice}', Measures.ISOCurrency: currency_code );
  description @( Common.Label: '{i18n>Cat.ProductDescr}' );
  image_url @( Common.Label: '{i18n>Cat.ProductImage}', UI.IsImageURL: true);
}

annotate CatalogService.Suppliers with {
  identifier @( Common : { Label: '{i18n>Cat.SuppliersIdentifier}', Text: name,  TextArrangement: #TextFirst } );
  postCode @( Common : { Label: '{i18n>Cat.SuppliersPostCode}', Text: city, TextArrangement: #TextFirst } );
  phone @Common.Label: '{i18n>Cat.SuppliersPhone}';
}
Copy code

Describing Setup of Fiori Sandbox

We will use the Fiori Launchpad Sandbox to configure the tiles in the applications section of JSON within the file. This is a great approach for lightweight testing during CAP development. It lets us see how our UI will look and feel when running in a Launchpad.

The steps involved include creation of the /app/resources/index.html file. In our example we create a tile for normal OData V4 output and other one for the Fiori Preview Products view after the Annotations were applied in the previous section.

Note
For ease of readability the above image only has one section of the Application code. The actual output is as shown in the next image.

Describe Generating a Fiori List Report Application

SAP Business Application Studio provides tools and components to Build the Fiori Application. The available generator provide visual guided wizard for Application generation. Process flow is shown in the following image.

Watch this video to learn how to generate a Fiori List Report Application.

List Report Floorplan | SAP Fiori Design Guidelines

Create Fiori Launchpad Sandbox

DemoWatch Demo

Code file - Create Fiori Launchpad Sandbox

Here we setup the Fiori Launchpad Sandbox. This needs a index.html with the below code. The below code uses two references

  1. Products OData V4 for displaying data in Json.
  2. Products Fiori reference- This is the one which uses the Annotations we defined for the Fiori output in the previous exercise.
Code snippet
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HC450_Fiori_App</title>
    <script>
        window["sap-ushell-config"] = {
            defaultRenderer: "fiori2",          
            applications: {                     
                "odata-v4": {
                    title: "Products",
                    description: "Products in OData V4",
                    applicationType : "URL",
                    url: "/catalog/Products"
                },
                "products-fiori": {
                    title: "Product Preview",
                    description: "Productss using Fiori Preview",
                    applicationType : "URL",
                    url: "/$fiori-preview/CatalogService/Products#preview-app"
                }  
            }
        };
    </script>

    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-theme="sap_fiori_3_dark"
        data-sap-ui-frameOptions="allow"
    ></script>
    <script>
        sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
    </script>

</head>
<body class="sapUiBody" id="content"></body>
</html>
Copy code

Here we update the index.html, this time with the reference to the generated app using the list report template. This time we see additional block

  1. Link for the Generated Fiori App
  2. Products OData V4 for displaying data in Json.
  3. Products Fiori reference- This is the one which uses the Annotations we defined for the Fiori output in the previous exercise.
Code snippet
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HC450_Fiori_App</title>
    <script>
        window["sap-ushell-config"] = {
            defaultRenderer: "fiori2",          
            applications: {     
                "os-fiori": {
                    title: "Product Overview",
                    description: "Products HC450 Fiori Example",
                    additionalInformation: "SAPUI5.Component=hc450.officesupplies.osfiori",                 
                    applicationType : "URL",
                    url: "/osfiori/webapp",
                    navigationMode: "embedded"
                },
                "odata-v4": {
                    title: "Products",
                    description: "Products in OData V4",
                    applicationType : "URL",
                    url: "/catalog/Products"
                },
                "products-fiori": {
                    title: "Product Preview",
                    description: "Productss using Fiori Preview",
                    applicationType : "URL",
                    url: "/$fiori-preview/CatalogService/Products#preview-app"
                }  
            }
        };
    </script>

    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-theme="sap_fiori_3_dark"
        data-sap-ui-frameOptions="allow"
    ></script>
    <script>
        sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
    </script>

</head>
<body class="sapUiBody" id="content"></body>
</html>
Copy code

Save progress to your learning plan by logging in or creating an account

Login or Register