Skip to Content

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

71 Comments
You must be Logged on to comment or reply to a post.
  • 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

      • 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

        • 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

          • 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

          • 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

          • 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

          • 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

          • 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

          • 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

          • 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

          • 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

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

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

          • 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

          • 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

          • 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

          • 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

  • 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

        • 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”
          }
          }
          • 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

          • 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

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

              }

            }

          • 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

          • 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

          • 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

  • 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

    • 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

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

    • 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

      • 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

        • 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

          • 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

          • 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

          • 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

          • 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

          • 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

          • 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

          • 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

          • 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

  • 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

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

    • 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