fiori

How to Create your first SAP Fiori Overview Page Application ? - Example using List Card

                   This is a step by step tutorial showing how to create your first SAP Fiori Overview Page Application using northwind OData service.We will add a List card to our application in this tutorial.
                   Overview Page Application(OVP Application) provide quick access to vital business information at a glance in the form of actionable cards. Large amount of data is visualized in attractive and efficient way through cards.
                    Different types of cards used in OVP are List card,Stack card,Table card,Link List card and Analytical card.The other two main components of OVP are an application header and a smart filter. OVP require sapui5 version 1.32 or higher.

Pre-requisites

  1. HCP(Hana Cloud Platform)Account with SAP WEB IDE enabled.SAP WEB IDE include Sap Overview Page Application template which makes the developer life easier.
  2. Destination for Northwind OData service added in HCP.(For knowing how to configure destination in HCP see  SAPUI5 Application Consuming OData service with SAP WEB IDE PART-1)(Or you can use other OData services also)


Steps

  1. Open SAP Web IDE. From menu select File->New->Project from Template.Choose Fiori Overview Application template.If its not seen select fiori elements or all  from category drop down.After choosing the template press next button.
  2. Give Project Name and press next.I am giving techippoOverviewApp.Press next button.
  3. We will reach at dataconnection configuration step.From sources select Service URL and select Northwind OData Service from drop down.This is one way of selecting data connection you can select from other options also.Give the northwind url in the input box and press test button.It will show the entities if success.I am using url /V2/Northwind/Northwind.svc/ .Select the service and press next button.
  4. In the annotation selection screen select the annotation file from your PC.for this create a file and save it as localAnnotation_1.xml in your Computer.Paste  code(content of annotation file is shared at end of this tutorial) inside the file and save it.Or you can just load the file from computer and add the code later in SAP Web IDE.Press next button.
  5. Give Data source alias as NorthwindModel .Give a meaningful application name and description.Press next button.An application will be created in the workspace.
  6. Application is ready.Now we can add Cards to it.For this Right click on application->new->Card.
  7. We will see two options.Select existing datasource or new datasource.We will proceed with our existing northwind datasource.select radio button and press next.
  8. Select a card.Choose List card and press next button.
  9. In Card customisation section select the entityset we are going to use.I chose Employees.Give a title.title is mandatory this will be shown in the card.
  10. Scroll down to Annotations section.Give annotation path as com.sap.vocabularies.UI.v1.LineItem#Top5Employees .Here Top5Employees is Qualifier name.If you are using different qualifier make sure to replace it with yours.
  11. Scroll down to Card Properties section.Choose List Type,List Flavor ,sort by and sort order.You can change all these properties in manifest.json cards section inside sap.ovp.Press next button.
  12. Our First ovp application is ready .Now run the application.
  13. Our First Overview Application Looks like this.
File Contents.

  1. localAnnotations_1.xml

  2. <edmx:Edmx
     xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
     xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
     xmlns:sap="http://www.sap.com/Protocols/SAPData" Version="1.0">
     <edmx:Reference
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"
      Uri="http://docs.oasis-open.org/odata/odata-data-aggregation-ext/v4.0/cs02/vocabularies/Org.OData.Aggregation.V1.xml">
      <edmx:Include Alias="Aggregation" Namespace="Org.OData.Aggregation.V1"/>
     </edmx:Reference>
     <edmx:Reference
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"
      Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Capabilities.V1.xml">
      <edmx:Include Alias="Capabilities" Namespace="Org.OData.Capabilities.V1"/>
     </edmx:Reference>
     <edmx:Reference
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"
      Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470974/Common.xml?api=v2">
      <edmx:Include Alias="Common" Namespace="com.sap.vocabularies.Common.v1"/>
     </edmx:Reference>
     <edmx:Reference
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"
      Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470971/Communication.xml?api=v2">
      <edmx:Include Alias="vCard" Namespace="com.sap.vocabularies.Communication.v1"/>
     </edmx:Reference>
     <edmx:Reference
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"
      Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Core.V1.xml">
      <edmx:Include Alias="Core" Namespace="Org.OData.Core.V1"/>
     </edmx:Reference>
     <edmx:Reference
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"
      Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Measures.V1.xml">
      <edmx:Include Alias="CQP" Namespace="Org.OData.Measures.V1"/>
     </edmx:Reference>
     <edmx:Reference
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"
      Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470968/UI.xml?api=v2">
      <edmx:Include Alias="UI" Namespace="com.sap.vocabularies.UI.v1"/>
     </edmx:Reference>
     <edmx:DataServices m:DataServiceVersion="2.0">
      <Schema
       xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="NorthwindModel" sap:schema-version="1">
       <Annotations
        xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="NorthwindModel.Employee">
        <Annotation Qualifier="Top5Employees" Term="UI.LineItem">
         <Collection>
          <Record Type="UI.DataField">
           <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance"/>
           <PropertyValue Property="Value">
            <Apply Function="odata.concat">
             <Path>TitleOfCourtesy</Path>
             <String>,</String>
             <Path>FirstName</Path>
             <String>,</String>
             <Path>LastName</Path>
            </Apply>
           </PropertyValue>
          </Record>
          <Record Type="UI.DataField">
           <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance"/>
           <PropertyValue Path="Title" Property="Value"/>
          </Record>
          <Record Type="UI.DataField">
           <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance"/>
           <PropertyValue Property="Value">
            <Apply Function="odata.concat">
             <Path>City</Path>
             <String>,
                                                                            </String>
             <Path>Region</Path>
             <String>,
                                                                            </String>
             <Path>Country</Path>
            </Apply>
           </PropertyValue>
          </Record>
         </Collection>
        </Annotation>
       </Annotations>
      </Schema>
     </edmx:DataServices>
    </edmx:Edmx>
    

  3. Manifest.json

  4.    {
     "_version": "1.5.0",
     "start_url": "start.html",
     "sap.app": {
      "id": "techippoOverviewApp",
      "type": "application",
      "i18n": "i18n/i18n.properties",
      "applicationVersion": {
       "version": "1.2.2"
      },
      "title": "{{app_title}}",
      "description": "{{app_description}}",
      "ach": "sap",
      "resources": "resources.json",
      "dataSources": {
       "NorthwindModel": {
        "uri": "/northwind/V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
         "annotations": [
          "localAnnotations_1"
         ],
         "localUri": "localService/NorthwindModel/metadata.xml"
        }
       },
       "localAnnotations_1": {
        "uri": "localService/NorthwindModel/localAnnotations_1.xml",
        "type": "ODataAnnotation",
        "settings": {
         "localUri": "localService/NorthwindModel/localAnnotations_1.xml"
        }
       }
      },
      "sourceTemplate": {
       "id": "OVP.cardtemplate",
       "version": "0.0.0"
      }
     },
     "sap.ui": {
      "technology": "UI5",
      "icons": {
       "icon": ""
      },
      "deviceTypes": {
       "desktop": true,
       "tablet": true,
       "phone": true
      },
      "supportedThemes": [
       "sap_hcb",
       "sap_belize"
      ]
     },
     "sap.ui5": {
      "dependencies": {
       "minUI5Version": "1.32.0",
       "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {},
        "sap.f": {},
        "sap.ushell": {},
        "sap.collaboration": {},
        "sap.ui.comp": {},
        "sap.uxap": {},
        "sap.ovp": {}
       }
      },
      "models": {
       "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "uri": "i18n/i18n.properties"
       },
       "NorthwindModel": {
        "dataSource": "NorthwindModel",
        "settings": {}
       },
       "@i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "uri": "i18n/i18n.properties"
       }
      },
      "extends": {
       "extensions": {}
      },
      "contentDensities": {
       "compact": true,
       "cozy": true
      }
     },
     "sap.ovp": {
      "globalFilterModel": "NorthwindModel",
      "globalFilterEntityType": "",
      "cards": {
       "techippoOverviewApp_card00": {
        "model": "NorthwindModel",
        "template": "sap.ovp.cards.list",
        "settings": {
         "title": "{{techippoOverviewApp_card00_title}}",
         "subTitle": "{{techippoOverviewApp_card00_subTitle}}",
         "entitySet": "Employees",
         "listType": "condensed",
         "listFlavor": "standard",
         "sortBy": "TitleOfCourtesy",
         "sortOrder": "descending",
         "addODataSelect": "false",
         "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Top5Employees"
        }
       }
      }
     }
    }
    
    

See my next post for knowing How to create Stack card with Quick View cards
If you enjoyed this post, Please Share!!

0 comments :

Post a Comment

Powered by Blogger.