Skip to Content
Author's profile photo Frank Schuler

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.

  1. To start with, if you hadn’t yet, you would have to activate the Overview Page Plugin:
    Optional Plugins.png
  2. 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:
    Northwind OData Service.png
  3. With the above in the bag, we can now create an Overview Page Application:
    Template Selection.png
  4. 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:
    Basic Information.png
  5. 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:
    Data Connection.png
  6. 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:Annotation Selection.png

  1. To continue, we have to specify some template customizations options:
    Template Customization.png
  2. That is all and we can confirm and finish:
    Confirmation.png
  3. 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/:
    Services.png
  4. With that, we can open the Annotation Structure in the Annotation Modeller:
    Innovation Structure.png
  5. 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:
    Annotation Structure.png
  6. You can also always flip between the Annotation Modeler and the XML view. A change in the one, will be reflected in the other:
    localAnnotations.png
  7. Next, we add a New Card with Using the existing Data source:
    New Card.png
  8. As a Card format, we chose Table:
    Table.png
  9. And then confirm some customizations:
    Card Customization.png
  10. With that we are done, and rewarded with a working SAP Fiori Overview Page with an Employee Card:  Employees Overview.png
  11. 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.

Assigned Tags

      45 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dusan Sacha
      Dusan Sacha

      Nice post, Frank! I am definitely  going to try it and looking forward to next blogs from you.

      Author's profile photo Nick Yang
      Nick Yang

      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

      Author's profile photo Anil Bavaraju
      Anil Bavaraju

      Excellent! Thanks for sharing the Annotation Modeler features.

      -Anil

      Author's profile photo Former Member
      Former Member

      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?

      Error.png

      Author's profile photo Christoph Laux
      Christoph Laux

      The official documentation for the SAP WebIDE Annotation Modeler is available here.

      Author's profile photo Jason Su
      Jason Su

      when i open with Annotation Modeler , it says 'this is not an annotation file' as below

      Capture.JPG

      Author's profile photo Christoph Laux
      Christoph Laux

      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

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      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

      Author's profile photo MEGHAL SHAH
      MEGHAL SHAH

      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.

      File.png/wp-content/uploads/2016/02/issue_895102.png

      Regards,

      Meghal Shah

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      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

      Author's profile photo Jason Su
      Jason Su

      Hello Frank,

        i have set both URI and LocalURI to 'localService/NorthwindModel/localAnnotations_1.xml'

      it works. thank you very much.

      Capture.JPG

      Capture1.JPG

      Best Regards,

      Jason

      Author's profile photo Jason Su
      Jason Su

      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

      Capture1.JPG

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      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

      Author's profile photo Jason Su
      Jason Su

      Hello Frank,

        yes. i write <Collection></Collection> in <Annotation Term="UI.LineItem"></Annotation> then everything become green.

      Best Regards,

      Jason

      Author's profile photo MEGHAL SHAH
      MEGHAL SHAH

      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

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      Hello Meghal,

      what exactly is not working for you and what error message do you receive when?

      Best regards

      Frank

      Author's profile photo MEGHAL SHAH
      MEGHAL SHAH

      Hi Frank,

      Thanks for the reply.

      getting below error.

      /wp-content/uploads/2016/03/issue_901251.png

      Regards,

      Meghal Shah

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      Hello Meghal,

      could you send me this log please.

      Best regards

      Frank

      Author's profile photo MEGHAL SHAH
      MEGHAL SHAH

      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

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      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

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Did you resolve the issue? i am also getting the same error?

      Author's profile photo Beat Andreas Honegger
      Beat Andreas Honegger

      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?

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      Hello Beat,

      You find all the annotation information in the LogoUI development toolkit for HTML5 - Demo Kit Developer Guide.

      Very best regards

      Frank

      Author's profile photo Beat Andreas Honegger
      Beat Andreas Honegger

      Thanks

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi,

        I tried this example,but i am not able view the data on the card, It shows cannot load card.

      snip1.PNG

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      Hello Jayakrishnan,

      please run this in your browser's developer mode to see the OData calls and determine which are failing.

      Best regards

      Frank

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Thank you, yes that was the error, annotation file uri was wrongly mentioned. Thanks a lot

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi Parth,

         

         Now i am able to view the list on the card. But data is not loaded on the card.

      Author's profile photo Former Member
      Former Member

      Can you please attach the Console Log?

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      snip1.PNG

      Author's profile photo Former Member
      Former Member

      Can you share with me the code also? Let me have a look and will try to rectify the issue.

      Cheers

      Parth

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi i have created separate thread for this issue, please look at there.

      Card List items are not loading in Fiori Overview page

      Author's profile photo Diether De Coninck
      Diether De Coninck

      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.

      Author's profile photo Michael Appleby
      Michael Appleby

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

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

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Priteshkumar Patel
      Priteshkumar Patel

      Is there any way to change format (e.g., Date) if there is a date value in the table.

      Author's profile photo Former Member
      Former Member

      Dear  Author,

      I encountered this error message in annotation modeller.
      /Gabriel.

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      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 

      Author's profile photo Simon Kemp
      Simon Kemp

      Hi Frank, I get the same error as Gabriel.

      Any suggestions?

      Thanks,
      Simon

      Author's profile photo Frank Schuler
      Frank Schuler
      Blog Post Author

      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

      Author's profile photo Simon Kemp
      Simon Kemp

      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

      Author's profile photo Philip Bartholomew
      Philip Bartholomew

      Simon, did you ever find a resolution to this error?  I am currently experiencing the same issue.

      Many thanks

      Author's profile photo Simon Kemp
      Simon Kemp

      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

      Author's profile photo Ankit Garg
      Ankit Garg

      Hi,

      I am getting following error

       

      https://answers.sap.com/questions/158944/index.html

       

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      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