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

To report this post you need to login first.

69 Comments

You must be Logged on to comment or reply to a post.

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

    (0) 
      1. 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

        (0) 
        1. 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

          (0) 
          1. 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

            (0) 
            1. 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

              (0) 
                  1. 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

                    (0) 
                    1. 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

                      (0) 
                  2. Jay Prakash Singh

                    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

                    (0) 
                    1. 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

                      (0) 
              1. Monika R

                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

                (0) 
                1. 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

                  (0) 
            2. 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…

              (0) 
              1. 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.

                (0) 
            3. 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

              (0) 
              1. 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

                (0) 
                1. Anonymous

                  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

                  (0) 
            4. 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

              (0) 
  2. 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

    (0) 
        1. 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”
          }
          }
          (0) 
          1. 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

            (0) 
              1. Jay Prakash Singh

                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

                (0) 
                1. 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”

                    }

                  }

                  (0) 
                2. 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

                  (0) 
                  1. Jay Prakash Singh

                    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

                    (0) 
                    1. 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

                      (0) 
  3. 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

    (0) 
    1. 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

      (0) 
  4. 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?

    (0) 
    1. 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

      (0) 
      1. 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

        (0) 
        1. 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

          (0) 
          1. Jay Prakash Singh

            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

            (0) 
              1. Jay Prakash Singh

                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

                (0) 
                1. 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

                  (0) 
                  1. 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

                    (0) 
                  2. 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

                    (0) 
                    1. 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

                      (0) 
                      1. Jay Prakash Singh

                        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

                        (0) 
                        1. 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

                          (0) 
  5. 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

    (0) 
      1. 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

        (1) 
  6. 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?

    (0) 
    1. 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

      (0) 

Leave a Reply