How to make your OData entities work with the Fiori Overview Page and Cards leveraging the new SAP Web IDE annotation modeler

Inspired by Anil Bavaraju's excellent blog on how to Create your first SAP Fiori Overview Page, I set-off to create exactly this. Fortunately, I discovered, that SAP have moved on since Anil’s blog, and especially the creation of the local annotation XML file is now supported by the SAP Web IDE annotation modeller. Also, there is a graphical interface to the manifest.json file now, and as a consequence no need to edit this manually any longer either.

Therefore I will describe the basic steps to create a Fiori Overview Page with a table Card only very briefly, and will focus on how to create the annotation file with new SAP Web IDE annotation modeller and how to adjust the manifst.json within Web IDE respectively.

1. To start with, if you hadn’t yet, you would have to activate the Overview Page Plugin:
   
   
2. Next, if you hadn’t yet, you would have to create a destination for the Northwind OData service:
   
3. With the above in the bag, we can now create an Overview Page Application:
   
4. I specify the project name as zovp, since I am going to deploy this to my NetWeaver Gateway Fiori Launch Pad in a later blog:
   
5. We then specify the connection to the OData service as http://services.odata.org/V3/Northwind/Northwind.svc/. As a result, all respective collections are displayed and we are especially interested in the Employees collection:
   
6. Next, we are asked, to specify an Annotation File. Please provide the following annotation XML shell file here:

<edmx:Edmx Version="1.0" 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">

               <edmx:DataServices m:DataServiceVersion="2.0">

                             <Schema Namespace="NorthwindModel" sap:schema-version="1" xmlns="http://docs.oasis-open.org/odata/ns/edm">

                                            <Annotations Target="NorthwindModel.Employee" xmlns="http://docs.oasis-open.org/odata/ns/edm">

                                                           <Annotation Term="UI.LineItem">

                                                           </Annotation>

                                            </Annotations>

                             </Schema>

               </edmx:DataServices>

</edmx:Edmx>

Since we will be using the SAP Web IDE annotation modeller to detail this later:

1. To continue, we have to specify some template customizations options:
   
2. That is all and we can confirm and finish:
   
3. Now we have to correct the local annotations file location in the manifest.json configuration file, which we can copy from the metadata.xml file location, i.e. we replace annotations/ witch localService/NorthwindModel/:
   
4. With that, we can open the Annotation Structure in the Annotation Modeller:
   
5. In the Annotation Modeller we add the fields as we would like them to be displayed on the Card:
   
6. Next, we add a New Card with Using the existing Data source:
   
7. As a Card format, we chose Table:
   
8. And then confirm some customizations:
   
   
   
9. With that we are done, and rewarded with a working SAP Fiori Overview Page with an Employee Card:
   
   
   
   
10. In my upcoming blogs, I will show you how to deploy this Fiori Overview Page to an on premise Fiori Launch Pad as well as to transform the Catalogue Service Fiori app from my previous blogs into a Fiori Card.