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
3. Select Overview Page template and click Next.
4. Enter a Project Name and click Next
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
7. I created a simple annotation file with the fields which I want to display in a card.
8. Upload the annotation file, and click OK
9. Click Next
10. Enter Project Namespace and click Next
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.
13. Select existing data source and click Next
Note: Currently the following cards are available:
- Transactional cards: List, Table, Stack
- Charts: Line, Bubble, Donut
14. Select the List Card and click Next.
15. Select an Entity Set from the dropdown, and enter a title under the Header Elements.
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.
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.
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
22. You should now see your first OVP with a List card.
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
Thanks Anil 🙂
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 Nick,
please, check this link about creating annotation file for the table cards. Maybe it will be helpful.
Dusan
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.
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.
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.
8. Use below content as the content of your annotation file.
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.
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,
I posted my reply accidentally before finished it. Please check it again.
Cheers.
Kind Regards,
Nick
Many thanks Nick! I am now able to get the data inside the list card.
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",
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.
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
Nick,
I haven't tried the quick view card, i will explore and will let you know the structure.
-Anil
Hi Anil,
Thanks for your reply, I also asked the same question in another blog (Introducing SAP Fiori Overview Page: Card-based Information Visualization). If I got answers from that SAP lady, I will post it here. Cheers.
Kind Regards,
Nick
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>@ORDER}"/>
<PropertyValue Property="TypeNamePlural" String="{@i18n>@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
Hi Abhishek,
I created a quick card based on Employees entityset. Probably you can compare mine with yours and do necessary changes as required.
Kind Regards,
Nick
Thanks Nick for sharing this annotation.Now i am also able to create quick card 🙂
Regards,
Abhishek
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.
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.
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 please post your bubble or line chart annotation to Not able to create bubble chart in overview page .this thread here someone had asked the same question.
Kind Regards,
Abhishek
Hi Abhishek,
I posted my response inside this discussion. Cheers.
Kind Regards,
Nick
Hi Nick,
I have posted below discussion , please reply on this.
Thanks,
JP
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
Hi Sharma,
Please check my reply to saurabh vakil , it should also answer your question. Cheers.
Kind Regards,
Nick
Brilliant Nick...
You should post this as a separate blog..
Great stuff 🙂
Many Thanks,
Chet
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 Jason,
I made the Northwind services v3 working with Overview Pages - List Cards in SAP WEB IDE.
Please check following post
SAP Overview Page List Cards Examples
You can find my annotation files in my Git repository
DusanSacha/sap_overview_page · GitHub
Hi Dusan,
Thanks for sharing these excellent examples with us for list card and its varieties.
Regards,
Nick
Hi Jason,
Do you have any example of bubble and line cart?
Please give some idea on this.
Thanks,
JP
Thanks.
Hi Abhishek,
Could you use following odata service in step 6 instead of the the url for V3 ones from above example? Then you should be able to see entries in "Entity Set" in step 15.
http://services.odata.org/V2/Northwind/Northwind.svc/
Kind Regards,
Nick
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
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 JP ,
I used the same annotation and manifest.json but still not getting data in card
Taken reference http://www.cadaxo.com/user-experience/sap-overview-page-example-list-card/
I used northwind odata V3 version
http://services.odata.org/V3/Northwind/Northwind.svc/
Console error
Regards,
Abhishek
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
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"
}
}
Regards,
Saurabh
Hi Saurabh ,
I used the same annotation file and manifest.json but cannot load data in card.
Console error.
Regards,
Abhishek
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.
Thanks,
JP
Check the code which i gave u
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"
Regards,
Abhishek
Hi ,
Please check you structure.
Create annotation file in folder annotations also manifest file will come under web-apps.
Please check.
Thanks,
JP
Hi JP,
Thanks for the suggestion finally problem got solved i changed my file strucuture .
Now its working perfectly 🙂
Regards,
Abhishek
Your manifest file told me that structure is worng:)
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
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
Frank,
I had been working on the OVP's with the NW Gateway OData services for quite some time, and unfortunately i did not see this issue.
Not sure if you tried troubleshooting your OData Service
SAP Fiori LL11 - Consultants should know about OData troubleshooting
-Anil
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
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
Really nice
Hi,
Can you helkp me with stack cards?
It says undefined
Hi Anil Bavaraju,
Thanks for such an excellent blog.
Is there a way to change font size and color on overview page and card ?
Thanks,
Tanveer
Hi ,
can we use json rather than odata in overview page ? kindly let me know if possible .