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

[architectSAP]

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 modeler. 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 modeler 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 already, you would have to create a destination for the Northwind OData service, which I will be using in this example, because there are no further preconditions to use it. In this next blog How to create a Fiori Overview Page leveraging an on premise OData service and deploy it to an on pr..., I have described how to consume a NetWeaver Gateway service instead:
   
3. With the above in the bag, we can now create an Overview Page Application:
   
4. I specify the project name as zovp, and in this next blog How to create a Fiori Overview Page leveraging an on premise OData service and deploy it to an on pr..., I am showing how to deploy a Fiori Overview Page to an on premise NetWeaver Gateway Fiori Launchpad:
   
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>

Especially important here is, that the annotation target matches the the service details and that the annotation term matches the mapping from the Table Cards documentation.

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 annotation URI and Local URI in the manifest.json configuration file, to where the Overview Page Application template has in fact stored it. As you can see from the project structure, it has been stored in localService/NortwindModel/, which is the same directory as for the metadata.xml file, i.e. we can copy this path from the metadata.xml file location and thereby 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. For example, the first column is labelled Name and contains a concatenation of TitleOfCourtesy, Firstname and Lastname:
   
6. You can also always flip between the Annotation Modeler and the XML view. A change in the one, will be reflected in the other:
   
7. Next, we add a New Card with Using the existing Data source:
   
8. As a Card format, we chose Table:
   
9. And then confirm some customizations:
   
10. With that we are done, and rewarded with a working SAP Fiori Overview Page with an Employee Card: 
11. 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.