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.
To report this post you need to login first.

44 Comments

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

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

    (0) 
  2. PARTH BUDHIRAJA

    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

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

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

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

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

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

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

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

      (0) 
      1. Jason Su

        Hello Frank,

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

        Best Regards,

        Jason

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

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

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

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

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

    (0) 
    1. Michael Appleby

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

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

      Thanks, Mike (Moderator)

      SAP Technology RIG

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

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

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

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

                (0) 

Leave a Reply