Skip to Content
Author's profile photo Anil Bavaraju

Create your first SAP Fiori Overview Page

SAP Fiori continues to excite, with the new SAP Fiori Overview Page (OVP) you can now perform your tasks better and faster by having all the information in one single page (SAP Fiori Overview Page), and this page displays various cards that are related to the domain and role of the user. In this blog we’ll teach you how to create an SAP Fiori Overview Page using a standard template, and then we’ll show you how to add a card to the OVP with a simple example.

Prerequisites:

  • HCP account with SAP Web IDE
  • Enable OVP Plugin in SAP Web IDE
  • OData Service
  • Annotation File

Perform the below steps to create your first SAP Fiori Overview Page:

     1. Login to SAP Web IDE.

     2. Create a new project by selecting New Project from Template

Img1.png

     3. Select Overview Page template and click Next.

Img2.png

     4. Enter a Project Name and click Next

Img3.png

     5. Select your source system connection, in this example I used an existing OData service (Purchasing Contract Service) from our demo system.

     6. Click Next

Img4.png

     7. I created a simple annotation file with the fields which I want to display in a card.

Img5.png

     8. Upload the annotation file, and click OK

Img6.png

     9. Click Next

Img7.png

     10. Enter Project Namespace and click Next

Img8.png

     11. Click Finish to create a project.

     12. Next, let’s add a new card to the OVP. Right click on your project and select New -> Card.

Img10.png

     13. Select existing data source and click Next

Img11.png

     Note: Currently the following cards are available:

    • Transactional cards: List, Table, Stack
    • Charts: Line, Bubble, Donut

     14. Select the List Card and click Next.

Img12.png

     15. Select an Entity Set from the dropdown, and enter a title under the Header Elements.

Img13.png

     16. Under the Advanced options select the fields as show in the figure, in this example I am sorting the data in the Card by the Purchase Order Date.

     17. Click Next.

Img14.png

     18. Click Finish to create the card.

     19. Next, let’s test this card in the SAP Web IDE. Right click on project and select Run –> New Configuration.

Img16.png

     20. Select SAP Fiori Components on Sandbox and click New Run Configuration

     21. Select the SAPUI5 version 1.32.4, and then click Save, and Run Now

Img17.png

     22. You should now see your first OVP with a List card.

Img18.png

Once you are done adding all the cards that you want to display in the OVP, you can deploy the SAP Fiori Overview page to either ABAP Repository or to the SAP HANA Cloud Platform by right clicking on project and selecting Deploy.

Congratulation! you have created your first SAP Fiori Overview Page.

Happy Learning!

-Anil Bavaraju

SAP Press Author – SAP Fiori Implementation and Development

Img20.png

Assigned Tags

      71 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tejas Chouhan
      Tejas Chouhan

      Thanks Anil 🙂

      Author's profile photo Nick Yang
      Nick Yang

      Hi Anil,

      Thanks for this great how-to blog. I got a question about the annotation file in step 7.

      How you create this file? I want to create this file by myself for other odata services.

      Thanks.


      Regards,

      Nick

      Author's profile photo Dusan Sacha
      Dusan Sacha

      Hi Nick,

      please, check this link about creating annotation file for the table cards. Maybe it will be helpful.

      Dusan

      Author's profile photo Nick Yang
      Nick Yang

      Hi Dusan,

      Thanks for sharing online help url. I figured out the content of annotation file for my odata service. It works quite good. Now, I am trying quick view card. Not many public information about how to prepare annotation content for cards in Fiori Overview Page. Hopefully can see more how-to on SCN in the future. Cheers.

      /wp-content/uploads/2015/11/2015_11_29_14h56_06_840377.png

      Kind regards,

      Nick

      Author's profile photo saurabh vakil
      saurabh vakil

      Hello Nick,

      Can you help me about the content of the annotation file? I am using the Northwind OData service and trying to show the employee information from the Employees collection in the List type card, but I am not able to get data in the list displayed.

      Regards,

      Saurabh

      Author's profile photo Nick Yang
      Nick Yang

      Hi Saurabh,

      There are several parts you need to check or add to make data shown on cards in OVP.

      1. destination setting: my setting is looking like below and you can find some blogs talking about this.

      /wp-content/uploads/2015/12/2015_12_11_20h32_16_849485.png

      2. In WebIDE cloud, follow this wonderful blog to create your OVP project.

      3. In step 6, select "Service URL" in "Sources" section; select "Northwind" model in the drop-down list; enter "http://services.odata.org/V3/Northwind/Northwind.svc" in the next filed.

      4. In step 7, at this stage, you can use a file (let's say myAnnon.xml) with some dummy content. We will replace it with correct content later.

      5.After finish step 11, the structure of you project and content of manifest.json should look like below.

      6. Finish all the rest of steps and run the project. I think you can only get a card with empty content, BUT you should be able to see total record number shown in the bottom of the card. It means at least WebIDE can call Northwind odata service to get all records in the Employees entityset. If no, open developer console, check error messages, and fix it.

      7. The structure of annotation file is looking like this.

      <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 Qualifier="Top5Employees" Term="com.sap.vocabularies.UI.v1.LineItem">

                ...

                      </Annotation>

                      under tag <Annotations> you can have tag "<Annotation>...</Annotation>" as many as you want.

                  </Annotations>

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

                      <Annotation Qualifier="Top5products" Term="com.sap.vocabularies.UI.v1.LineItem">

                ...

                      </Annotation>

                  </Annotations>

                 under tag <Schema> you can have tag "<Annotations> </Annotations>"as many as you want.

              </Schema>

          </edmx:DataServices>

      </edmx:Edmx>

      • The value of "Namespace" in tag <Schema> should be same as "Datasource Alias" in step 10.
      • The value of "Target" in tag <Annotations> is the value of entity type in metadata.xml. So, annotations is used to point to different entity type as the data source for different cards in OVP.

      • The value of "Qualifier"in tag <Annotation> is used to distinguish different setting under same term (in our case is com.sap.vocabularies.UI.v1.LineItem).

      8. Use below content as the content of your annotation file.

      <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 Qualifier="Top5Employees" Term="com.sap.vocabularies.UI.v1.LineItem">

                          <Collection>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.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="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Path="Title" Property="Value"/>

                              </Record>                       

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.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>

      For how to give data in the list card, please check its online help.

      List Cards - User Interface Add-On for SAP NetWeaver - SAP Library

      9. Set the value of annotationPath in manifest.json like this. OVP will search com.sap.vocabularies.UI.v1.LineItem to be the data source and #Top5Employees can make annotation unique if there are many tag <Annotation> with term="com.sap.vocabularies.UI.v1.LineItem" under same tag <Annotations>

      10. In the end, the card is looking like this.

      Cheers.

      Kind Regards,

      Nick

      Author's profile photo saurabh vakil
      saurabh vakil

      Hello Nick,

      Thanks for taking the time to respond. The northwind destination I have created looks exactly like the screen shot you have posted. I am also able to create the project using the Overview Page template as explained in this blog. On completing the project creation my project folder structure also matched the one you have posted a screen shot of. While creating the project I just uploaded an annotation .xml file with the contents as given in this blog, only with the field names changed to match to the Employees collection in the northwind service. I then create a List type card and select Entity Set as Employees.

      When I run this project I can see an empty list (no data is displayed in the list) but with the text Showing 5 out of 9 in the bottom which indeed means that Web IDE is able to connect to the northwind service and get the count of records.

      OVP.JPG

      But the list itself does not show the corresponding data. So my question is how exactly should my annotation file look like if I want to make the details of the record visible in each list item.

      Regards,

      Saurabh

      Author's profile photo Nick Yang
      Nick Yang

      Hi Saurabh,

      I posted my reply accidentally before finished it. Please check it again.

      Cheers.

      Kind Regards,

      Nick

      Author's profile photo saurabh vakil
      saurabh vakil

      Many thanks Nick! I am now able to get the data inside the list card.

      Capture.JPG

      Regards,

      Saurabh

      Author's profile photo Nick Yang
      Nick Yang

      Hi Saurabh,

      If you want to go deeper. Maybe you can try different combination of type and flavor of list card as well as table card.

      Also, when you click any one item in the card, it should bring you to the corresponding app and show the detail of that particular record. That's what I am exploring right now. Cheers.

      Kind Regards,

      Nick

      Author's profile photo saurabh vakil
      saurabh vakil

      Hi Nick,

      Trying out the table and stack type cards is exactly what I am exploring at this time. The annotation file for both these types is where I am a bit stuck up - I cannot get the table header in the Table type card but it displays the data correctly. Once I figure this out I would go for the app navigation on selection of a particular line item. I will post an update here as I progress.

      Thanks,

      Saurabh

      Author's profile photo Former Member
      Former Member

      Hi Saurabh,

      I am also facing the same issue , I am using Northwind to do a demo for Overview page.

      My Code :

      <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 Qualifier="Top5Employees" Term="com.sap.vocabularies.UI.v1.LineItem">

                          <Collection>

                          <Record Type="com.sap.vocabularies.UI.v1.DataField">

                  <PropertyValue Property="Label" String="EmployeeID"/>

                  <PropertyValue Property="Value" Path="EmployeeID"/>

              </Record>

              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                  <PropertyValue Property="Label" String="FirstName"/>

                  <PropertyValue Property="Value" Path="FirstName"/>

              </Record>

                          </Collection>

                      </Annotation>

                  </Annotations>

              </Schema>

          </edmx:DataServices>

      </edmx:Edmx>

      Could you please check and if you have correct annotation file.Please give me for table card.

      Thanks,

      JP

      Author's profile photo saurabh vakil
      saurabh vakil

      Hi JP,

      I am able to create a Table type card with the below annotation file. I used the Employees collection from the Northwind service.

      <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="com.sap.vocabularies.UI.v1.LineItem" Qualifier="TopCustomers">

                          <Collection>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Name"/>

                                  <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="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Title"/>

                                  <PropertyValue Path="Title" Property="Value"/>

                              </Record>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Address"/>

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

      Also ensure that in the manifest.json file after creating the Table card you suffix the qualifier name at the end of the annotationPath property in the settings object of the card under "sap.ovp" : {} as

      "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#TopCustomers",

      Capture.JPG

      Regards,

      Saurabh

      Author's profile photo Former Member
      Former Member

      Hello Nick!

      I followed your blog to create Card. I could create card but I faced the same issue like Saurabh had.

      I did follow the steps that you provided for Saurabh's issue but then I eas not able to see the data.

      Can you please guide me to resolve this issue and understand cards.

      Please find the attachment how I created project in the following link

      https://docs.google.com/document/d/15U87_8tnkahTUZhKiWtwXNQJfiXVBQW2Wt5I1R-IxB4/edit

      Thanks in advance

      Monika Ramdas

      Author's profile photo Nick Yang
      Nick Yang

      Hi Monika,

      I am very happy to give my suggestion in regards to your question. Could you please create a discussion thread in Fiori subject and past your annotation content in the thread? Cheers.

      Kind Regards,

      Nick

      Author's profile photo Jason Scott
      Jason Scott

      This comment is excellent Saurabh. It provided the missing link for me which was the # qualifier at the end of the annotation path in the manifest file. Without that no data is retrieved from the OData service.

      I must say though... I can handle writing my own OData service files, but creating these annotation file by hand is absolutely ludicrous!  😉

      SAP desperately need to get some training guides about this out and hopefully a tool to sit on top of it and make it easier... Like drag and drop from your OData metadata file or something...

      Author's profile photo saurabh vakil
      saurabh vakil

      I agree Jason. The creating of the annotation file was where I was really stuck up and could not find any documentation about how exactly the entire should be structured. I hope SAP at least simplifies this process by providing some kind of guides to make it a bit easier to follow and implement fully.

      Author's profile photo Tobias Trapp
      Tobias Trapp

      Thank you for describing this in detail. I managed to implement it but I heard other have problems. Maybe you could export your example so that others can load it into Web IDE.

      Best Regards,

      Tobias

      Author's profile photo saurabh vakil
      saurabh vakil

      Hi Tobias,

      Here v-saurabh/tableovp · GitHub I have uploaded the annotation XML (from the Web IDE project's webap -> annotations folder) and the manifest.json from the Web IDE project where I have created a Table card for displaying the data.

      This will just display the data retrieved from the Northwind service in a table card - I have not written any action for navigating.

      Regards,

      Saurabh

      Author's profile photo Former Member
      Former Member

      Hi Saurabh ,

      I am trying to create overview page using northwind odata services(Employee).I followed the steps given in this blog.In step 9 i added random annotation file .In step 10 i am getting no options in drop down of Entity type filter field.

      I left that field empty and again followed the subsequent steps but in step 15 also i am not getting any option in Entity type field for creating cards.

      even i copied your manifest.json file and annotation file but getting error

      Uncaught TypeError: Cannot read property 'getMetaModel' of undefined.

      In output i am getting card but showing msg cannot load card

      Kindly help me out in this.

      Regards,

      Abhishek

      Author's profile photo Frank Schuler
      Frank Schuler

      Hello Nick,

      thank you for this excellent blog and clarifying comment. Ii inspired me to make a Card on a Fiori Overview Page work.

      The only thing I very positively realized, is that this is not as difficult anymore, as it was when you figured it out, since the annotation file can now comfortable modeled with the SAP Web IDE annotation modeler and the and there is a graphical user interface to maintain the manifest.json as well.

      I documented my experience in a little blog referencing yours.

      Very best regards

      Frank

      Author's profile photo Nick Yang
      Nick Yang

      Hi Anil,

      Do you have any idea about content structure of annotation file for quick view card?

      The only information I can find on the Internet and SAP online help is just few lines as you can see in the below.

      Quick view cards display information about a single record in the entity set. Use a quick card to display more information about the record than you could see in a table or a list.

      The header of the quick view card displays information from the com.sap.vocabularies.UI.v1.HeaderInfoannotation.

      The content area shows FieldGroup records from referenceFacet items that have been tagged using theIsSummary annotation in the com.sap.vocabularies.UI.v1.Facets annotation.

      You can assign actions to the cards that open in the object stream of the stack card. The actions are displayed as buttons in the card footer.

      Source: Quick View Cards - User Interface Add-On for SAP NetWeaver - SAP Library

      Obviously annotation content is the key to make cards working on OVP, but examples are zero. I have figured out HeaderInfo part, but not content part. Any hints would be appreciated. Cheers.

      Kind Regards,

      Nick

      Author's profile photo Anil Bavaraju
      Anil Bavaraju
      Blog Post Author

      Nick,

      I haven't tried the quick view card, i will explore and will let you know the structure.

      -Anil

      Author's profile photo Nick Yang
      Nick Yang

      Hi Anil,

      Thanks for your reply, I also asked the same question in another blog (Introducing SAP Fiori Overview Page: Card-based Information Visualization). If I got answers from that SAP lady, I will post it here. Cheers.

      Kind Regards,

      Nick

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi Nick ,

      I am trying to create quick card in overview page taken reference from SAPUI5 SDK - Demo Kit.

      I am getting quick card without any content.

      annotation.xml

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

        <Annotation Qualifier="Header" Term="com.sap.vocabularies.UI.v1.HeaderInfo">

      <Record>

      <PropertyValue Property="Title">

      <Record Type="com.sap.vocabularies.UI.v1.DataField">

        <PropertyValue Property="Criticality" String="com.sap.vocabularies.UI.v1.CriticalityType/Negative"/>

        <PropertyValue Path="CustomerID" Property="Value"/>

      </Record>

      </PropertyValue>

      <PropertyValue Property="TypeName" String="{@i18n&gt;@ORDER}"/>

      <PropertyValue Property="TypeNamePlural" String="{@i18n&gt;@ORDERS}"/>

        <PropertyValue Property="TypeImageUrl" String=""/>

      <PropertyValue Property="ImageUrl" String=""/>

      </Record>

      </Annotation>

      <Annotation Qualifier="contentarea" Term="com.sap.vocabularies.UI.v1.Facets">

        <Collection>

      <Record Type="com.sap.vocabularies.UI.v1.ReferenceFacet">

      <Annotation String="true" Term="com.sap.vocabularies.UI.v1.IsSummary"/>

        <Annotation String="true" Term="com.sap.vocabularies.UI.v1.Map"/>

        <PropertyValue AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#fieldgroup" Property="Target"/>

        </Record>

      </Collection>

      </Annotation>

      <Annotation Qualifier="fieldgroup" Term="com.sap.vocabularies.UI.v1.FieldGroup">

        <Record>

      <PropertyValue Property="Data">

      <Collection>

      <Record Type="com.sap.vocabularies.UI.v1.DataField">

        <PropertyValue Path="OrderID" Property="Value"/>

      </Record>

      <Record Type="com.sap.vocabularies.UI.v1.DataField">

        <PropertyValue Path="CustomerID" Property="Value"/>

      </Record>

      </Collection>

      </PropertyValue>

      </Record>

      </Annotation>

      </Annotations>

      manifest.json

      "card05": {
      "model": "NorthwindModel",
      "template": "sap.ovp.cards.stack",
      "settings": {
      "category": "{{card05_category}}",
      "entitySet": "Orders"
      }
      }
      Author's profile photo Nick Yang
      Nick Yang

      Hi Abhishek,

      I created a quick card based on Employees entityset. Probably you can compare mine with yours and do necessary changes as required.

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

        <Annotation Term="com.sap.vocabularies.UI.v1.HeaderInfo">

          <Record Type="com.sap.vocabularies.UI.v1.HeaderInfoType">

            <PropertyValue Property="TypeName" String="Employee"/>

            <PropertyValue Property="TypeNamePlural" String="Employees"/>

            <PropertyValue Property="Title">

              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                <PropertyValue Property="Value">

                  <Apply Function="odata.concat">

                    <Path>TitleOfCourtesy</Path>

                    <String> </String>

                    <Path>FirstName</Path>

                    <String> </String>

                    <Path>LastName</Path>

                  </Apply>

                </PropertyValue>

              </Record>

            </PropertyValue>

            <PropertyValue Property="Description">

              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                <PropertyValue Property="Label" String="Title"/>

                <PropertyValue Path="Title" Property="Value"/>

              </Record>

            </PropertyValue>

            <PropertyValue Property="TypeImageUrl">

              <Apply Function="odata.fillUriTemplate">

                <String>http://cdn-1.nflximg.com/en_us/boxshots/large/7005802{encodedphoto}.jpg</String>

                  <LabeledElement Name="encodedphoto">

                    <Path>EmployeeID</Path>

                  </LabeledElement>

              </Apply>

            </PropertyValue>

          </Record>

        </Annotation>

        <Annotation Term="com.sap.vocabularies.UI.v1.Facets">

          <Collection>

            <Record Type="UI.ReferenceFacet">

              <Annotation String="true" Term="com.sap.vocabularies.UI.v1.IsSummary"/>

              <PropertyValue AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#NorthwindEmployees" Property="Target"/>

            </Record>

          </Collection>

        </Annotation>

        <Annotation Qualifier="NorthwindEmployees" Term="com.sap.vocabularies.UI.v1.FieldGroup">

          <Record>

            <PropertyValue Property="Data">

              <Collection>

                <Record Type="UI.DataField">

                  <PropertyValue Property="Label" String="Territory"/>

                  <PropertyValue Property="Value">

                    <Apply Function="odata.concat">

                      <Path>City</Path>

                      <String>, </String>

                      <Path>Region</Path>

                      <String>, </String>

                      <Path>Country</Path>

                    </Apply>

                  </PropertyValue>

                </Record>

                <Record Type="UI.DataField">

                  <PropertyValue Property="Label" String="Contact Number"/>

                  <PropertyValue Property="Value">

                      <Path>HomePhone</Path>

                  </PropertyValue>

                </Record>

                <Record Type="UI.DataField">

                  <PropertyValue Property="Label" String="Notes"/>

                  <PropertyValue Property="Value">

                      <Path>Notes</Path>

                  </PropertyValue>

                </Record>                              

              </Collection>

            </PropertyValue>

          </Record>

        </Annotation>

      </Annotations>

      Kind Regards,

      Nick

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Thanks Nick for sharing this annotation.Now i am also able to create quick card 🙂

      Regards,

      Abhishek

      Author's profile photo Former Member
      Former Member

      Hi Nick,

      Thanks for your this blog for stack card, it helped alot.

      I have used your annotation file as it is , it is working fine but i am not able to get any header info on the card but content are coming.

      See the attachment.

      card1.PNG

      I have used annotation file as it is and manifest file is as below.

      "card03": {

        "model": "NorthwindModel",

        "template": "sap.ovp.cards.stack",

        "settings": {

        "entitySet": "Employees",

        "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#NorthwindEmployees",

        "dataPointAnnotationPath":"com.sap.vocabularies.UI.v1.DataPoint#NorthwindEmployees"

        }

        }

      Can you please share yours or you can tell me what proble is here.

      Thansk,

      JP

      Author's profile photo Dusan Sacha
      Dusan Sacha

      Hi Jay,

      I would recommend you to use the "New -> Card" wizard in SAP WEB IDE. You can define your texts in there and manifest file will be generated automaticaly:

      Example of Stack Card Manifest settings:

      "card03": {

        "model": "NorthwindModel",

        "template": "sap.ovp.cards.stack",

        "settings": {

                "title": "Employees headline",

                "category": "Employees subtitle",

                "description": "Description",

                "entitySet": "Employees"

        }

      }

      Author's profile photo Nick Yang
      Nick Yang

      Hi Jay,

      I did the same thing which is mentioned by Dusan. Here is the setting for quick card in my manifest.json.

      "QuickViewCard": {

        "model": "NorthwindModel",

        "template": "sap.ovp.cards.stack",

        "settings": {

          "title": "Meet Our Staffs!",

          "category": "NorthWind Company",

          "entitySet": "Employees"

        }

      }

      Kind Regards,

      Nick

      Author's profile photo Former Member
      Former Member

      Hi Nick,

      Thanks for your help.

      Could you please help me to solve one more issue with respect to bubble cart.

      I have created the bubble cart but it is not displaying any data.

      Do you have any example of that ?

      Thanks,

      JP

      Author's profile photo Nick Yang
      Nick Yang

      Hi JP,

      I haven't figured out annotation for bubble card, but I can share with you how I use annotation modeler in WebIDE. If you could create another discussion thread on SCN, I'll post it at there. Thanks.

      Kind Regards,

      Nick

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi Nick,

      Could you please post your bubble or line chart annotation to  Not able to create bubble chart in overview page .this thread here someone had asked the same question.

      Kind Regards,

      Abhishek

      Author's profile photo Nick Yang
      Nick Yang

      Hi Abhishek,

      I posted my response inside this discussion. Cheers.

      Bubble cart is not showing any data in sap overview page

      Kind Regards,

      Nick

      Author's profile photo Former Member
      Former Member

      Hi Nick,

      I have posted below discussion , please reply on this.

      Bubble cart is not showing any data in sap overview page

      Thanks,

      JP

      Author's profile photo Sharma Chetanya
      Sharma Chetanya

      Hi Nick,

      Could you explain how did you figured out the content of your odata file? Please explain by the NorthWind.svc explain you have showed in earlier screenshot.

      Also, Is there an odata.v2 version available for NorthWind.svc, a normal SALESORDERXX won't work in this case??

      This would be of great help.

      Regards,

      Chet

      Author's profile photo Nick Yang
      Nick Yang

      Hi Sharma,

      I will probably write a blog to explain how I create that annotation file and its format or reply at here later.

      About odata.v2 is available for Northwind or not, I would say yes, it should be working fine, but you can't use all functions in odata.v2. Because, Northwind doesn't have annotation information, so some functions won't work. For your SALESORDERXX odata service, it also should be ok to be accessed by odata v1 or v2 model in your UI5 applications.I assumed your SALESORDERXX model doesn't have annotation information, so you need to build one by yourself for it, then you can use it in Fiori Overview Page.

      Kind Regards,

      Nick

      Author's profile photo Nick Yang
      Nick Yang

      Hi Sharma,

      Please check my reply to saurabh vakil , it should also answer your question. Cheers.

      Kind Regards,

      Nick

      Author's profile photo Sharma Chetanya
      Sharma Chetanya

      Brilliant Nick...

      You should post this as a separate blog..

      Great stuff 🙂

      Many Thanks,

      Chet

      Author's profile photo Jason Scott
      Jason Scott

      Will this work against the Northwind serivces at http://services.odata.org/v3/northwind/northwind.svc ?

      I'm trying to create an annotation file to work with Northwhind but its nor working. Firstly the sample above looks like just "part" of the annotation file. The help link further up the blog shows a full file but it won't work with Northwind even when I change to the correct property names.

      Does this need a newer OData version or something?

      Any pointers on where to get doco and help on creating the annotation files?

      Author's profile photo Dusan Sacha
      Dusan Sacha

      Hi Jason,

      I made the Northwind services v3 working with Overview Pages - List Cards in SAP WEB IDE.
      Please check following post

      SAP Overview Page List Cards Examples

      You can find my annotation files in my Git repository

      DusanSacha/sap_overview_page · GitHub

      Author's profile photo Nick Yang
      Nick Yang

      Hi Dusan,

      Thanks for sharing these excellent examples with us for list card and its varieties.

      Regards,

      Nick

      Author's profile photo Former Member
      Former Member

      Hi Jason,

      Do you have any example of bubble and line cart?

      Please give some idea on this.

      Thanks,

      JP

      Author's profile photo Former Member
      Former Member

      Thanks.

      Author's profile photo Nick Yang
      Nick Yang

      Hi Abhishek,

      Could you use following odata service in step 6 instead of the the url for V3 ones from above example? Then you should be able to see entries in "Entity Set" in step 15.

      http://services.odata.org/V2/Northwind/Northwind.svc/

      Kind Regards,

      Nick

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi Nick ,

      Thanks for reply.

      Yesterday i tried with V3 .I was able to see the entries in "Entity set" but in my output

      card is coming with message "cannot load card" with some errors.Even i tried with V2 but getting same problem.

      console error


      Uncaught (in promise) Objectannotations: Objectfail: Array[1]0: Objectlength: 1__proto__: Array[0]success: Array[0]__proto__: Object

      error in ODataMetaModel.loaded(): undefined -  sap.ui.model.odata.v2.ODataModelA

      Can't load card with id:'card00' and type:'sap.ovp.cards.table', reason:[object Object] -  A

      https://webidetesting5143958-

      p1941243286trial.dispatcher.hanatrial.ondemand.com/resources/sap-ui-core.js Failed to load resource: the server responded with a status of 404 (Not Found)

      Annotation.xml

      <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="com.sap.vocabularies.UI.v1.LineItem" Qualifier="TopEmployees">

                          <Collection>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Name"/>

                                  <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="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Title"/>

                                  <PropertyValue Path="Title" Property="Value"/>

                              </Record>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Address"/>

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

      Manifest.json

      {

        "_version": "1.1.0",

        "start_url": "start.html",

        "sap.app": {

        "_version": "1.1.0",

        "id": "EmployeeOVP",

        "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": "/destinations/Northy",

        "type": "OData",

        "settings": {

        "annotations": [

        "localAnnotations_1"

        ],

        "localUri": "localService/NorthwindModel/metadata.xml"

        }

        },

        "localAnnotations_1": {

        "uri": "annotations/localAnnotations_1.xml",

        "type": "ODataAnnotation",

        "settings": {

        "localUri": "annotations/localAnnotations_1.xml"

        }

        }

        },

        "sourceTemplate": {

        "id": "OVP.cardtemplate",

        "version": "0.0.0"

        }

        },

        "sap.ui": {

        "_version": "1.2.0",

        "technology": "UI5",

        "icons": {

        "icon": "sap-icon://dimension"

        },

        "deviceTypes": {

        "desktop": true,

        "tablet": true,

        "phone": true

        },

        "supportedThemes": [

        "sap_hcb",

        "sap_bluecrystal"

        ]

        },

        "sap.ui5": {

        "_version": "1.1.0",

        "dependencies": {

        "minUI5Version": "1.32.0",

        "libs": {

        "sap.ovp": {

        "minVersion": "1.32.0"

        }

        }

        },

        "models": {

        "i18n": {

        "type": "sap.ui.model.resource.ResourceModel",

        "uri": "i18n/i18n.properties"

        },

        "NorthwindModel": {

        "dataSource": "NorthwindModel",

        "settings": {}

        }

        },

        "extends": {

        "component": "sap.ovp.app",

        "minVersion": "1.32.0",

        "extensions": {}

        },

        "contentDensities": {

        "compact": true,

        "cozy": true

        }

        },

        "sap.ovp": {

        "_version": "1.1.0",

        "globalFilterModel": "NorthwindModel",

        "globalFilterEntityType": "",

        "cards": {

        "card00": {

        "model": "NorthwindModel",

        "template": "sap.ovp.cards.table",

        "settings": {

        "title": "{{card00_title}}",

        "category": "{{card00_category}}",

        "entitySet": "Employees",

        "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#TopEmployees"

        }

        }

        }

        }

      }

      Regards,

      Abhishek

      Author's profile photo Nick Yang
      Nick Yang

      Hi Abhishek,

      It seems annotation.xml is ok.

      One possible error is in manifest.json

      ...

        "title": "{{app_title}}",

        "description": "{{app_description}}",

        "ach": "sap",

        "resources": "resources.json",

        "dataSources": {

        "NorthwindModel": {

        "uri": "/destinations/Northy", --> should be /destinations/Northwind/V2/Northwind/Northwind.svc/

        "type": "OData",

        "settings": {

        "annotations": [

        "localAnnotations_1"

        ],

        "localUri": "localService/NorthwindModel/metadata.xml"

        }

        },

      ...

      Kind Regards,

      Nick

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi Nick,

      I changed the uri to /destinations/Northwind/V2/Northwind/Northwind.svc/

      earlier uncaught promise error gone but still getting same message on card "cannot load card"


      I am running application as web application.Is it necessary to run it as SAP fiori component  on sandbox??

      I try to run it as SAP fiori component on sandbox but page is taking too much time to load



      Regards,

      Abhishek

      Author's profile photo Former Member
      Former Member

      Hi Abhishek,

      For fiori overview page , there is two important place where a developer has to check.

      1. Annotation file

      2. Manifest file

      Please find the code below use and create a overview page

      Annotation File :

      localAnnotations_1.xml

      <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.Invoice" xmlns="http://docs.oasis-open.org/odata/ns/edm">

                      <Annotation Qualifier="Top5Invoices" Term="com.sap.vocabularies.UI.v1.LineItem">

                          <Collection>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <PropertyValue Path="ProductName" Property="Value"/>

                              </Record>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <PropertyValue Path="ShipName" Property="Value"/>

                              </Record>                      

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <PropertyValue Path="ExtendedPrice" Property="Value"/>

                              </Record>

                          </Collection>

                      </Annotation>

                  </Annotations>

              </Schema>

          </edmx:DataServices>

      </edmx:Edmx>

      Manifest File(Copy and paste the code into manifest file of urs)

      Manifest.json

      {

        "_version": "1.1.0",

        "start_url": "start.html",

        "sap.app": {

        "_version": "1.1.0",

        "id": "com.cadaxo.app",

        "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": "/destinations/Northwind/V3/Northwind/Northwind.svc/",

        "type": "OData",

        "settings": {

        "annotations": [

        "localAnnotations_1"

        ],

        "localUri": "localService/metadata.xml"

        }

        },

        "localAnnotations_1": {

        "uri": "annotations/localAnnotations_1.xml",

        "type": "ODataAnnotation",

        "settings": {

        "localUri": "annotations/localAnnotations_1.xml"

        }

        }

        },

        "sourceTemplate": {

        "id": "OVP.cardtemplate",

        "version": "0.0.0"

        }

        },

        "sap.ui": {

        "_version": "1.2.0",

        "technology": "UI5",

        "icons": {

        "icon": "sap-icon://dimension"

        },

        "deviceTypes": {

        "desktop": true,

        "tablet": true,

        "phone": true

        },

        "supportedThemes": [

        "sap_hcb",

        "sap_bluecrystal"

        ]

        },

        "sap.ui5": {

        "_version": "1.1.0",

        "dependencies": {

        "minUI5Version": "1.32.0",

        "libs": {

        "sap.ovp": {

        "minVersion": "1.32.0"

        }

        }

        },

        "models": {

        "i18n": {

        "type": "sap.ui.model.resource.ResourceModel",

        "uri": "i18n/i18n.properties"

        },

        "NorthwindModel": {

        "dataSource": "NorthwindModel",

        "settings": {}

        }

        },

        "extends": {

        "component": "sap.ovp.app",

        "minVersion": "1.32.0",

        "extensions": {}

        },

        "contentDensities": {

        "compact": true,

        "cozy": true

        }

        },

        "sap.ovp": {

        "_version": "1.1.0",

        "globalFilterModel": "NorthwindModel",

        "globalFilterEntityType": "",

        "cards": {

        "card00": {

        "model": "NorthwindModel",

        "template": "sap.ovp.cards.list",

        "settings": {

        "listType": "condensed",

        "listFlavor": "standard",

        "sortBy": "ExtendedPrice",

        "sortOrder": "DESC",

        "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Top5Invoices",

        "category": "Top 5 Invoices",

        "entitySet": "Invoices"

        }

        }

        }

        },

        "sap.platform.hcp": {

        "uri": "webapp",

        "_version": "1.1.0"

        }}

      Thanks,

      JP

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi JP ,

      I used the same annotation and manifest.json but still not getting data in card

      Taken reference http://www.cadaxo.com/user-experience/sap-overview-page-example-list-card/

      I used northwind odata V3 version

      http://services.odata.org/V3/Northwind/Northwind.svc/

      card.PNG

      Console error

      card1.PNG

      Regards,

      Abhishek

      Author's profile photo Former Member
      Former Member

      Hi Abhishek,

      Send me your annotation and manifest file.

      Also how are you using the northwind, have you added northwind into destination of the hana cloud cockpit?

      Thanks,

      JP

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi JP,

      Yes ,I added destination in HCP

      desti.PNG

      Manifest.json

      {

        "_version": "1.1.0",

        "start_url": "start.html",

        "sap.app": {

        "_version": "1.1.0",

        "id": "InvoiceOVP",

        "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": "/destinations/Northwind/V3/Northwind/Northwind.svc/",

        "type": "OData",

        "settings": {

        "annotations": [

        "localAnnotations_1"

        ],

        "localUri": "localService/NorthwindModel/metadata.xml"

        }

        },

        "localAnnotations_1": {

        "uri": "annotations/localAnnotations_1.xml",

        "type": "ODataAnnotation",

        "settings": {

        "localUri": "annotations/localAnnotations_1.xml"

        }

        }

        },

        "sourceTemplate": {

        "id": "OVP.cardtemplate",

        "version": "0.0.0"

        }

        },

        "sap.ui": {

        "_version": "1.2.0",

        "technology": "UI5",

        "icons": {

        "icon": "sap-icon://dimension"

        },

        "deviceTypes": {

        "desktop": true,

        "tablet": true,

        "phone": true

        },

        "supportedThemes": [

        "sap_hcb",

        "sap_bluecrystal"

        ]

        },

        "sap.ui5": {

        "_version": "1.1.0",

        "dependencies": {

        "minUI5Version": "1.32.0",

        "libs": {

        "sap.ovp": {

        "minVersion": "1.32.0"

        }

        }

        },

        "models": {

        "i18n": {

        "type": "sap.ui.model.resource.ResourceModel",

        "uri": "i18n/i18n.properties"

        },

        "NorthwindModel": {

        "dataSource": "NorthwindModel",

        "settings": {}

        }

        },

        "extends": {

        "component": "sap.ovp.app",

        "minVersion": "1.32.0",

        "extensions": {}

        },

        "contentDensities": {

        "compact": true,

        "cozy": true

        }

        },

        "sap.ovp": {

        "_version": "1.1.0",

        "globalFilterModel": "NorthwindModel",

        "globalFilterEntityType": "",

        "cards": {

        "card00": {

        "model": "NorthwindModel",

        "template": "sap.ovp.cards.list",

        "settings": {

        "category": "{{card00_category}}",

        "entitySet": "Invoices",

        "listType": "condensed",

        "listFlavor": "standard",

        "sortBy": "ExtendedPrice",

        "sortOrder": "descending",

        "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Top5Invoices"

        }

        }

        }

        }

      }

      Annotation.xml

      <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.Invoice" xmlns="http://docs.oasis-open.org/odata/ns/edm">

                      <Annotation Qualifier="Top5Invoices" Term="com.sap.vocabularies.UI.v1.LineItem">

                          <Collection>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <PropertyValue Path="ProductName" Property="Value"/>

                              </Record>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <PropertyValue Path="ShipName" Property="Value"/>

                              </Record>                      

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <PropertyValue Path="ExtendedPrice" Property="Value"/>

                              </Record>

                          </Collection>

                      </Annotation>

                  </Annotations>

              </Schema>

          </edmx:DataServices>

      </edmx:Edmx>

      and in step 6 I used http://services.odata.org/V3/Northwind/Northwind.svc/ this url to get entity collection and selected Invoice .

      Regards,

      Abhishek

      Author's profile photo saurabh vakil
      saurabh vakil

      Hi Abhishek,

      With the below annotation and manifest files I am able to see employee data from the Northwind service (V3) on a table type card.

      localAnnotations_1.xml:

      <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="com.sap.vocabularies.UI.v1.LineItem" Qualifier="TopEmployees">

                          <Collection>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Name"/>

                                  <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="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Title"/>

                                  <PropertyValue Path="Title" Property="Value"/>

                              </Record>

                              <Record Type="com.sap.vocabularies.UI.v1.DataField">

                                  <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>

                                  <PropertyValue Property="Label" String="Address"/>

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

      manifest.json:

      {

        "_version": "1.1.0",

        "start_url": "start.html",

        "sap.app": {

        "_version": "1.1.0",

        "id": "com.test",

        "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": "/destinations/northwind/V3/Northwind/Northwind.svc/",

        "type": "OData",

        "settings": {

        "annotations": [

        "localAnnotations_1"

        ],

        "localUri": "localService/metadata.xml"

        }

        },

        "localAnnotations_1": {

        "uri": "annotations/localAnnotations_1.xml",

        "type": "ODataAnnotation",

        "settings": {

        "localUri": "annotations/localAnnotations_1.xml"

        }

        }

        },

        "sourceTemplate": {

        "id": "OVP.cardtemplate",

        "version": "0.0.0"

        }

        },

        "sap.ui": {

        "_version": "1.2.0",

        "technology": "UI5",

        "icons": {

        "icon": "sap-icon://dimension"

        },

        "deviceTypes": {

        "desktop": true,

        "tablet": true,

        "phone": true

        },

        "supportedThemes": [

        "sap_hcb",

        "sap_bluecrystal"

        ]

        },

        "sap.ui5": {

        "_version": "1.1.0",

        "dependencies": {

        "minUI5Version": "1.32.0",

        "libs": {

        "sap.ovp": {

        "minVersion": "1.32.0"

        }

        }

        },

        "models": {

        "i18n": {

        "type": "sap.ui.model.resource.ResourceModel",

        "uri": "i18n/i18n.properties"

        },

        "NorthwindModel": {

        "dataSource": "NorthwindModel",

        "settings": {}

        }

        },

        "extends": {

        "component": "sap.ovp.app",

        "minVersion": "1.32.0",

        "extensions": {}

        },

        "contentDensities": {

        "compact": true,

        "cozy": true

        }

        },

        "sap.ovp": {

        "_version": "1.1.0",

        "globalFilterModel": "NorthwindModel",

        "globalFilterEntityType": "Employee",

        "cards": {

        "card00": {

        "model": "NorthwindModel",

        "template": "sap.ovp.cards.table",

        "settings": {

        "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#TopEmployees",

        "category": "{{card00_category}}",

        "entitySet": "Employees"

        }

        }

        }

        },

        "sap.platform.hcp": {

        "uri": "webapp",

        "_version": "1.1.0"

        }

      }

      Capture.JPG

      Regards,

      Saurabh

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi Saurabh ,

      I used the same annotation file and manifest.json but cannot load data in card.

      Console error.

      Regards,

      Abhishek

      Author's profile photo Nick Yang
      Nick Yang

      Hi Abhishek,

      I used your manifest.json and annotation file in my project, I can see table card running correctly without any problem. Can you create a new discussion thread (now it's too crowed) and past the content of "neo-app.json" at there? Cheers.

      Kind Regards,

      Nick

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi Nick ,

      I think the one you implemented using my manifest.json and annotation.xml file its an list card .I dont understand why  i am not getting data in card even i am using the same annotation and manifest file .

      Even i tried with Employee entity collection as well as Invoice entity collection but getting same error "cannot load card".

      Neo-app.json

      {

        "welcomeFile": "index.html",

        "routes": [

          {

            "path": "/destinations/Northwind",

            "target": {

              "type": "destination",

              "name": "Northwind"

            },

            "description": "Northwind OData Service"

          },

          {

            "path": "/resources",

            "target": {

              "type": "service",

              "name": "sapui5",

              "preferLocal": true,

              "entryPath": "/resources"

            },

            "description": "SAPUI5 Resources"

          },

          {

            "path": "/sap/ui5/1/resources",

            "target": {

              "type": "service",

              "name": "sapui5",

              "preferLocal": true

            },

            "description": "SAPUI5 dist layer resources"

          },

          {

            "path": "/",

            "target": {

              "type": "application",

              "name": "flpsandbox",

              "preferLocal": true

            },

            "description": "Subscribed Fiori LaunchPad"

          },

          {

            "path": "/test-resources",

            "target": {

              "type": "service",

              "name": "sapui5",

              "entryPath": "/test-resources"

            },

            "description": "SAPUI5 Test Resources"

          }

        ]

      }

      Regards,

      Abhishek

      Author's profile photo Former Member
      Former Member

      Hi Abhishek,

      I compared with my code and found one mismatch.

      "localUri": "localService/NorthwindModel/metadata.xml"


      is should be localService/metadata.xml


      Can you check also try to keep same Manifest file.


      "sap.ovp": {
      "_version": "1.1.0",
      "globalFilterModel": "NorthwindModel",
      "globalFilterEntityType": "",
      "cards": {
      "card00": {
      "model": "NorthwindModel",
      "template": "sap.ovp.cards.list",
      "settings": {
      "listType": "condensed",
      "listFlavor": "standard",
      "sortBy": "ExtendedPrice",
      "sortOrder": "DESC",
      "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Top5Invoices",
      "category": "Top 5 Invoices",
      "entitySet": "Invoices"
      }
      }
      }
      },


      Thanks,

      JP

      Author's profile photo Former Member
      Former Member

      Check the code which i gave u

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi JP,

      I changed the localuri but still getting same error but i think that is not a problem

      its an path of metadata.xml and my file structure look like this.

      localuri: "localService/NorthwindModel/metadata.xml"

      katto.PNG

      Regards,

      Abhishek

      Author's profile photo Former Member
      Former Member

      Hi ,

      Please check you structure.

      Create annotation file in folder annotations also manifest file will come under  web-apps.

      Please check.

      Thanks,

      JP

      Author's profile photo abhishek lohiya
      abhishek lohiya

      Hi JP,

      Thanks for the suggestion finally problem got solved i changed my file strucuture .

      Now its working perfectly 🙂

      Regards,

      Abhishek

      Author's profile photo Former Member
      Former Member

      Your manifest file told me that structure is worng:)

      Author's profile photo Frank Schuler
      Frank Schuler

      Hello Anil,

      thank you again for this excellent blog. After getting a Fiori Overview Page Card working with the Northwind OData service, I tried the same with an NetWeaver Gateway service, that I had been using for Fiori apps before.

      However, the execution fails with a 400 Bad Request for the following command: https://webidetesting6903080-s000xxxxxxxtrial.dispatcher.hanatrial.ondemand.com/sap/opu/odata/iwfnd/CATALOGSERVICE/$batch

      400 Bad Request.png

      If I execute the commands in the request body individually they work fine. These are:

      --batch_36e2-a1fc-1c0d

      Content-Type: application/http

      Content-Transfer-Encoding: binary

      GET ServiceCollection/$count HTTP/1.1

      Accept: text/plain, */*;q=0.5

      Accept-Language: en-GB

      DataServiceVersion: 2.0

      MaxDataServiceVersion: 2.0

      --batch_36e2-a1fc-1c0d

      Content-Type: application/http

      Content-Transfer-Encoding: binary


      GET ServiceCollection?$skip=0&$top=5&$orderby=Title%20asc HTTP/1.1

      Accept: application/json

      Accept-Language: en-GB

      DataServiceVersion: 2.0

      MaxDataServiceVersion: 2.0

      --batch_36e2-a1fc-1c0d--

      Have you come across this before and perhaps even have a solution for it?

      Many thanks in advance

      Frank

      Author's profile photo Anil Bavaraju
      Anil Bavaraju
      Blog Post Author

      Frank,

      I had been working on the OVP's with the NW Gateway OData services for quite some time, and unfortunately i did not see this issue.

      Not sure if you tried troubleshooting your OData Service

      SAP Fiori LL11 - Consultants should know about OData troubleshooting

      -Anil

      Author's profile photo Frank Schuler
      Frank Schuler

      Thank you Anil,

      as it turned out, while the CATALOGSERVICE service is perfectly fine with a traditional Fiori application as used in this blog Verify your Gateway (Frontend) Installation in 45 Minutes, it does not seem to like the $batch command used with Fiori Cards. Using the RMTSAMPLEFLIGHT_2 Reference SFlight Data Provider, everything works perfectly fine and I could finish my respective blog How to create a Fiori Overview Page leveraging an on premise OData service and deploy it to an on premise Fiori Launchpad.

      Many thanks again

      Frank

      Author's profile photo Diether De Coninck
      Diether De Coninck

      Hi, I wondered if you had a sample of how to use one of the graph cards and how to code/configure the filter at the top.

      Lastly, is there a way to link from one of these cards to a specific fiori app or for example a Business Objects designer report?

      Author's profile photo Michael Appleby
      Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Really nice

      Author's profile photo Sanjana M Herur
      Sanjana M Herur

      Hi,

      Can you helkp me with stack cards?

      It says undefined

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Anil Bavaraju,

      Thanks for such an excellent blog.

      Is there a way to change font size and color on overview page and card ?

      Thanks,

      Tanveer

      Author's profile photo Former Member
      Former Member

      Hi ,

       

      can we use json rather than odata in overview page  ? kindly let me know if possible .