How to create Overview page along with List card

Hi friends,

In this blog post I am going to explain about how to create overview page along with list card. As we all know, overview page is SAP Fiori app which provides all the user information data in single page based on user’s specific role. Let us see an example of list card.

Step-1:

Login to SAP Web IDE.

Step-2:

Here, I am using Northwind OData service as data. So I am going to set up this service in HCP Destinations folder.

• In the Destinations page, click on New Destination button.

• We need to give the following properties to add the Northwind destination file.

• Click on save button after entering all the properties as shown in the below screenshot.

• Now we can see the popup with message connection established (i.e., destination is added).

Step-3:

Now I am going to create a new project by selecting New Project from Template

Step-4:

Choose Fiori Overview Application template and press Next button.

Step-5:

In the Basic Information tab, give the project details like Project Name, Namespace, Title, Description and press Next button.

Here I gave, Project Name as “Overview_Page”

Namespace as “com.overview”

Title as “Overview Page”

Step-6:

Now in data connection tab, choose Service URL from Sources and select Northwind OData Service from drop down. Then we need to give northwind url and press “Test” button as shown below. If success, It will show the service and entities belong to that service when we click on test button.

Here, I gave the url as “ /V2/Northwind/Northwind.svc/ ” and selected the northwind service and entity as “Employees”. After that press Next button.

Step-7:

Leave the annotation selection tab for now, we will add the annotation file afterwards. Click on Next button.

Step-8:

In Template Customization tab, give Data source alias as “NorthwindModel” and EntityType for Filter as “Employee”. Press Finish button. An application will be created in the workspace.

Step-9:

The Application is created as shown below.

Step-10:

Annotation file creation:

Now our next step is to create an Annotation file. For that we need to do the following steps.

Right click on localService folder and select New -> Annotation File

Step-11:

Name the annotation file as “annotation_list” and choose oData Service. Click on Next button.

We will see a confirmation message. Click on Finish button to continue.

Now we can see the Annotation file created under the folder localService.

Step-12:

Here is the code for list card. Copy the following code in your annotation_list.xml file.

<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>

Step-13:

Now we can add Cards to it.

For this Right click on application—>new—>Card.

Step-14:

Select the card. Here I am choosing List card as I want to create list card and press next button.

Step-15:

In the Configure Datasource tab, we will see two options. Here we can select new datasource or we can use existing datasorce. I am going with our existing datasource “northwind”. Choose “Use existing datasource” radio button then select “NorthwindModel”. Press “Next” button.

Step-16:

In Template customisation section, select the Entity set we are going to use. I choose “Employees”. Give a title and subtitle.

The Title what we gave here will be displayed on the card.

Step-17:

We will see an Annotations section when you scroll a little bit down.

Here we have to mention the annotation path. I am giving the annotation path as com.sap.vocabularies.UI.v1.LineItem#Top5Employees as I am going to show the top 5 employees on the card.

Step-18:

Scroll down to Card Properties section. Choose List Type, List Flavor, Sort by and Sort order. Press next button.

Click on Finish Button.

Step-19:

Now the card is added. While adding the card, the below code will be generated automatically by the WebIDE wizard in manifest.json file under sap.ovp section. And we can change all these properties in manifest.json cards section as shown below.

Step-20:

This is the output for the OVP with list card.

Similarly we can create other cards like Table card, Stack card, Analytical cards etc.