How to make your OData entities work with the Fiori Overview Page and Cards leveraging the new SAP Web IDE annotation modeler
Inspired by Anil Bavaraju‘s excellent blog on how to Create your first SAP Fiori Overview Page, I set-off to create exactly this. Fortunately, I discovered, that SAP have moved on since Anil’s blog, and especially the creation of the local annotation XML file is now supported by the SAP Web IDE annotation modeler. Also, there is a graphical interface to the manifest.json file now, and as a consequence no need to edit this manually any longer either.
Therefore I will describe the basic steps to create a Fiori Overview Page with a table Card only very briefly, and will focus on how to create the annotation file with new SAP Web IDE annotation modeler and how to adjust the manifst.json within Web IDE respectively.
- To start with, if you hadn’t yet, you would have to activate the Overview Page Plugin:
- Next, if you hadn’t already, you would have to create a destination for the Northwind OData service, which I will be using in this example, because there are no further preconditions to use it. In this next blog How to create a Fiori Overview Page leveraging an on premise OData service and deploy it to an on premise Fiori Launchpad, I have described how to consume a NetWeaver Gateway service instead:
- With the above in the bag, we can now create an Overview Page Application:
- I specify the project name as zovp, and in this next blog How to create a Fiori Overview Page leveraging an on premise OData service and deploy it to an on premise Fiori Launchpad, I am showing how to deploy a Fiori Overview Page to an on premise NetWeaver Gateway Fiori Launchpad:
- We then specify the connection to the OData service as http://services.odata.org/V3/Northwind/Northwind.svc/. As a result, all respective collections are displayed and we are especially interested in the Employees collection:
- Next, we are asked, to specify an Annotation File. Please provide the following annotation XML shell file here:
<edmx:Edmx Version=”1.0″ xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx“
xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:sap=”http://www.sap.com/Protocols/SAPData“>
<edmx:DataServices m:DataServiceVersion=”2.0″>
<Schema Namespace=”NorthwindModel” sap:schema-version=”1″ xmlns=”http://docs.oasis-open.org/odata/ns/edm“>
<Annotations Target=”NorthwindModel.Employee” xmlns=”http://docs.oasis-open.org/odata/ns/edm“>
<Annotation Term=”UI.LineItem“>
</Annotation>
</Annotations>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
Especially important here is, that the annotation target matches the the service details and that the annotation term matches the mapping from the Table Cards documentation.
We will be using the SAP Web IDE annotation modeller to detail this later:
- To continue, we have to specify some template customizations options:
- That is all and we can confirm and finish:
- Now we have to correct the annotation URI and Local URI in the manifest.json configuration file, to where the Overview Page Application template has in fact stored it. As you can see from the project structure, it has been stored in localService/NortwindModel/, which is the same directory as for the metadata.xml file, i.e. we can copy this path from the metadata.xml file location and thereby replace annotations/ witch localService/NorthwindModel/:
- With that, we can open the Annotation Structure in the Annotation Modeller:
- In the Annotation Modeller we add the fields as we would like them to be displayed on the Card. For example, the first column is labelled Name and contains a concatenation of TitleOfCourtesy, Firstname and Lastname:
- You can also always flip between the Annotation Modeler and the XML view. A change in the one, will be reflected in the other:
- Next, we add a New Card with Using the existing Data source:
- As a Card format, we chose Table:
- And then confirm some customizations:
- With that we are done, and rewarded with a working SAP Fiori Overview Page with an Employee Card:
- In my upcoming blogs, I will show you how to deploy this Fiori Overview Page to an on premise Fiori Launch Pad as well as to transform the Catalogue Service Fiori app from my previous blogs into a Fiori Card.
Nice post, Frank! I am definitely going to try it and looking forward to next blogs from you.
Hi Frank,
It's a great blog, addressing everything in very detail with screen-shots! Definitely, helping others get OVP function on without too much pain.
Kind Regards,
Nick
Excellent! Thanks for sharing the Annotation Modeler features.
-Anil
Hi Frank
Very nice blog. OVP cards are running fine in my environment, though everytime I run my application it is showing me this error. I have no clue I why I am getting this?
The official documentation for the SAP WebIDE Annotation Modeler is available here.
when i open with Annotation Modeler , it says 'this is not an annotation file' as below
Hi Jason,
did you read about the prerequisites in the documentation, which need to be met to get the Annotation Modeler run? You will find the corresponding section here.
Beside of that you can create a valid annotation file following the steps, presented in this section.
BR, Christoph
Hello Jason,
have you corrected the path (URI and local URI) to the annotation file in the manifest.json file? By default, the template sets this path to annotations but in your case it should be localService/NorthwindModel.
Best regards
Frank
Hi Frank ,
Many thanks for the blog.
I am facing the same issue. I have followed all the steps mentioned in the blog.
Please suggest.
Regards,
Meghal Shah
Hello Meghal,
are you sure that you set both the URI and the Local URI to localService/NorthwindModel. From the screen shot you provided, the Local URI looks wrong (correct path missing).
Best regards
Frank
Hello Frank,
i have set both URI and LocalURI to 'localService/NorthwindModel/localAnnotations_1.xml'
it works. thank you very much.
Best Regards,
Jason
i can open annotation modeler now, but i think there is some error in my side as below red error status.
does anyone else meet this issue ?
best regards,
jason su
Hello Jason,
you see the red light, because your annotation is incomplete at this point.
Please add at least one UI.DataField to your UI.LineItem and everything will become green.
Best regards
Frank
Hello Frank,
yes. i write <Collection></Collection> in <Annotation Term="UI.LineItem"></Annotation> then everything become green.
Best Regards,
Jason
Hi Experts,
I have created the project but still i am unable to execute it successfully.
I have attached project here. can you please check and suggest what is the issue.
FioriOverviewPage.zip - Google Drive
Regards,
Meghal Shah
Hello Meghal,
what exactly is not working for you and what error message do you receive when?
Best regards
Frank
Hi Frank,
Thanks for the reply.
getting below error.
Regards,
Meghal Shah
Hello Meghal,
could you send me this log please.
Best regards
Frank
Hi Frank,
I hve shared my project on Overviewpage.zip - Google Drive.
can you please check.
Previously I got the above mentioned error but now blank page is coming.
Requested Error Log :
--------------
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
2016-03-06 14:32:07 Device API logging initialized - DEVICE
2016-03-06 14:32:07.477129 registerResourcePath ('', '../../../../../resources/') - sap.ui.ModuleSystem
2016-03-06 14:32:07.477625 URL prefixes set to: - sap.ui.ModuleSystem
2016-03-06 14:32:07.477854 (default) : ../../../../../resources/ - sap.ui.ModuleSystem
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
2016-03-06 14:32:07.612824 registerResourcePath ('sap/ushell/renderers/fiorisandbox', 'https://webidetesting1964376-p19trial.dispatcher.hanatrial.ondemand.com/test-resources/sap/ushell/bootstrap/../renderers/fiorisandbox/') - sap.ui.ModuleSystem
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
2016-03-06 14:32:07.872324 Failed to load Fiori Launchpad Sandbox configuration from /appconfig/fioriSandboxConfig.json: status: error; error: Service Unavailable -
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
2016-03-06 14:32:08.311129 Failed to load AppCacheBuster index file from: "https://webidetesting1-p1941trial.dispatcher.hanatrial.ondemand.com/sap-ui-cachebuster-info.json?sap-ui-language=en-US". -
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
'webkitIndexedDB' is deprecated. Please use 'indexedDB' instead.
2016-03-06 14:32:09.527139 registerResourcePath ('Overviewpage', '../../../../../webapp/') - sap.ui.ModuleSystem
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
2016-03-06 14:32:10.180564 registerResourcePath ('Overviewpage', '../../../../../webapp/') - sap.ui.ModuleSystem
Uncaught Error: found in negative cache: 'Overviewpage/Component.js' from ../../../../../webapp/Component.js: 503 - Service Unavailable
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
Regards,
Meghal Shah
Hello Meghal,
this is unfortunately not conclusive yet.
Have you tried to recreate the failed OData service calls in a REST client like Postman?
That should provide you with the inside why things fail.
Best regards
Frank
Did you resolve the issue? i am also getting the same error?
Hello Frank
Thanks alot very good Blog !!
Helps me to get the app running with mockdata 🙂
Q: Where can find information to create annotations so I can show Data in the "Line Chart" card with colored Value, trend and %-change of the KPI?
Hello Beat,
You find all the annotation information in the
UI development toolkit for HTML5 - Demo Kit Developer Guide.
Very best regards
Frank
Thanks
Hi,
I tried this example,but i am not able view the data on the card, It shows cannot load card.
Hello Jayakrishnan,
please run this in your browser's developer mode to see the OData calls and determine which are failing.
Best regards
Frank
You can refer the below mentioned blog's comments. Resolved the same error.
Credit if helpful. Thanks
Parth
Fiori Overview Page (OVP) Creating List, Table and Stack Card
Thank you, yes that was the error, annotation file uri was wrongly mentioned. Thanks a lot
Hi Parth,
Now i am able to view the list on the card. But data is not loaded on the card.
Can you please attach the Console Log?
Can you share with me the code also? Let me have a look and will try to rectify the issue.
Cheers
Parth
Hi i have created separate thread for this issue, please look at there.
Card List items are not loading in Fiori Overview page
Hi,
I have some additional questions.
- Is it possible to link from one of these cards into a fiori app directly taking some of the data as a parameter? For example let a manager go from the employee overview straight into the leave approval for that employee? Or from a chart into a BO report (so an external URL) ?
- How do you use/implement the global filter?
- Do you have an example of some of the graph card types?
Thx,
D.
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
Is there any way to change format (e.g., Date) if there is a date value in the table.
Dear Author,
I encountered this error message in annotation modeller.
/Gabriel.
Hello Gabriel,
I have not come across this error before. Could you perhaps add a screenshot of your annotation modeller screen so that I can get a bit of an idea of the context where this happens?
Best regards
Frank
Hi Frank, I get the same error as Gabriel.
Any suggestions?
Thanks,
Simon
Hello Simon,
in the manifest.json file, do both the URI and the Local URI properties point to where your annotations file is in fact stored, i.e. NorthwindOVP/webapp/annotations/myAnnotations.xml?
Best regards
Frank
Hi Frank... yes they do:
Also it all works when I run it. I just cannot open the Annotations file in the Annotation modeller.
Thanks,
Simon
Simon, did you ever find a resolution to this error? I am currently experiencing the same issue.
Many thanks
Hi Philip,
It's been a while but from memory I think it was something to do with the format of the file, I must have had something unusual in it. I tried to go back in and have a look but for some reason now I am not even getting that far as I am getting an error with the Destination that previously worked fine.
Sorry I can't help more.
Simon
Hi,
I am getting following error
https://answers.sap.com/questions/158944/index.html
Hi Frank,
This helps a lot –
Is there way to change font size and color of text on these cards using local annotations ?
or any other way ?
Thanks
Tanveer