Hello Everyone.

After going through  Anil Bavaraju‘s  blog on how to Create your first SAP Fiori Overview Page, I created my first blog on how to create all three types of cards i.e. List Card, Table Card and Stack Card (Quick Display Card) in a single go.


Creating List Card


1. Initially, go to SAP WEB IDE optional plugin tab and select Overview Page Plugin Option (ovp plugin) and hit save. (Refresh the browser to make changes go reflect)

                              /wp-content/uploads/2016/02/1_884739.png

2. Create Destination for Northwind oData service (if already in place) by going to Destination tab and key in following properties:-

                              /wp-content/uploads/2016/02/2png_884740.png

3.     Go to SAP WEB IDE and select New project from Template option, and choose Over View Page Application

                         /wp-content/uploads/2016/02/3_884749.png

4.      Name the project and click next. (Use Z in case you need to deploy Over view Page onto your server).

                    /wp-content/uploads/2016/02/4_884772.png

5. In Data Connection tab, select Service URL sub-tab and provide URL of your oData service and hit next.

                         /wp-content/uploads/2016/02/5_884773.png

6. Now we have to provide annotation source file. The content of the Annotation.xml file for List Card type should be like this and it must be under annotations folder which in under webapp folder.

<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=”Employees” 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>

Target is NorthwindModel.Employee where Employee is the name of the entity type against which we are displaying the contents on the List Card.

        By default, the fields in the list card are mapped to the  com.sap.vocabularies.UI.v1.LineItem annotation.


  7. Click Next and Finish


                              /wp-content/uploads/2016/02/7_884798.png

                              /wp-content/uploads/2016/02/8_884799.png

8. Now go to the project and select New > Card

                                                  /wp-content/uploads/2016/02/9_884800.png

9. Select NorthWindModel and click Next

                               /wp-content/uploads/2016/02/10_884816.png

10. Select List Card and key in following values:-

                                 /wp-content/uploads/2016/02/11_884817.png

                                     /wp-content/uploads/2016/02/12_884818.png

11. Make changes in manifest.json file to display the data in the Card. Add Qualifier name used in Annotation file at end of annotation path.

                         /wp-content/uploads/2016/02/123_884825.png

11. Run the project in SAP Fiori Component on Sandbox. It would look like this

/wp-content/uploads/2016/02/13_884826.png

Similarly, do it for Table Card.

For Table card, select Table card from the Card selection Menu and change the annotation file accordingly. Annotation term for Table Card  can be seen from https://sapui5.netweaver.ondemand.com/#docs/guide/167bf7ccbb084afab7d846e1fa30b49c.html

I have created Table Card for Customers Entity Set. Annotation file for Table Card is as follows:-

<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.Customer” xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

                <Annotation Qualifier=”Customers” 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 = “Label” String = “Name”></PropertyValue>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                    <Path>ContactName</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 = “Contact”></PropertyValue>

                            <PropertyValue Path = “Phone” 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>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                    <Path>City</Path>

                                    <String>, </String>

                                    <Path>Country</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>

                    </Collection>

                </Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

Manifest.json

/wp-content/uploads/2016/02/14_884827.png

Table card is displayed as follows:-

/wp-content/uploads/2016/02/15_884831.png

For Stack Card ( Quick Display card), I again used Customer entity set and made necessary changes to Annotation file which is as follows:-

<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.Customer” xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

                <Annotation Term=”com.sap.vocabularies.UI.v1.HeaderInfoType”>

                <PropertyValue Property=”TypeName” String=”Customer”/>

    <PropertyValue Property=”TypeNamePlural” String=”Customers”/>

    <PropertyValue Property=”Title”>

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <PropertyValue Property=”Value”>

                                    <Path>ContactName</Path>

                            </PropertyValue>

                        </Record>

                        </PropertyValue>

                        </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#NorthwindCustomers” Property=”Target”/>

    </Record>

    </Collection>

  </Annotation>

    <Annotation Qualifier=”NorthwindCustomers” Term=”com.sap.vocabularies.UI.v1.FieldGroup”>

  <Record>

       <PropertyValue Property=”Data”>

                    <Collection>

                    <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                        <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                <String> Contact Name </String>

                                    <Path>ContactName</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>      

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                        <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                <String> Contact No. </String>

                                    <Path>Phone</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>                     

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                <String>Address</String>

                                    <Path>City</Path>

                                    <String>, </String>

                                    <Path>Country</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>

                    </Collection>

                    </PropertyValue>

                    </Record>

                  </Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

Manifest.json file remains unchanged for Stack Type Card.

Stack Card is displayed as follows:-

/wp-content/uploads/2016/02/16_884833.png

/wp-content/uploads/2016/02/17_884843.png

Cheers,

Parth

To report this post you need to login first.

37 Comments

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

  1. Michael Appleby

    Wonder how many Liked or rated the blog?  Two ratings and one like.  That makes 12 points to reward the author.

    Much better than most blogs.

    Cheers, Mike

    SAP Technology RIG

    (0) 
  2. Christoph Laux

    You may wonder, if you get tool support for creating the annotation file. Therefore, SAP WebIDE includes the Annotation Modeler.

    The official documentation is available here.

    (0) 
      1. meghal shah

        Hi parth,

        I am facing below issue while executing the project. can you please guide how to resolve this issue.

        Thanks in advance,

        Error.png.png

        Regards,

        Meghal Shah

        (0) 
        1. PARTH BUDHIRAJA Post author

          Hi Meghal,

          Can you please attach the annotation and manifest.json files you are using and also tell

          the path to it (where exactly you have placed annotation.xml under your project directory).

          Thanks

          Parth

          (0) 
            1. PARTH BUDHIRAJA Post author

              Hi Meghal

              In your project, annotation.xml file is located under local service folder. SAP WebIDE by default in manifest.json file searches annotation.xml file under annotations folder ( under webapp folder). I have attached the image (showing right path) .Kindly change the path in the manifest.json file.

              Doubt1.png

              Hope this helps!! πŸ™‚


              Regards

              Parth

              (2) 
  3. Monika R


    Hello Parth! Great blog!


    I’m refereing your blog and creating card, but I’m facing issue in selecting Entity set for card.cardEntitySet1.PNG

    There is no list of entity set to select.

    I used Northwind metadata and your list card annotation

    Can you please guide me in solving this issue.

    (1) 
  4. Priteshkumar Patel

    HI Parth, Is there any way to format values in card like showing “Bold” values in stack, format date in “mm/dd/yyyy” if there is any date or in table card, headers should be in bold?

    (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) 
  5. Deborshi De Sarkar

    Hello Parth

    I am trying to create my first OVP application.

    But in the EntitySet field i am not able to find out any values from the dropdown list.

    Can you please suggest on  this ??

    OVP_1.jpg Thanks

    (0) 
  6. Annkathrin Butzke

     

    Thanks for the explanation.

     

    Is it possible to make a navigation into a detail view of a special item, which is shown in the list card? The detail view has the same Β semantic object as the Full-Screen Page with all items.

    At the moment the navigation works into the Full-Screen Page.

     

    Thanks in advance

    (0) 

Leave a Reply