fiori

Fiori Overview Page Application(OVP) - Creating Table Card How to?

        In previous tutorials we have created a fiori ovp application and added List Card,Stack Card and Analytical Card.In this tutorial we will add a Table Card to our application which we have created already.        A Table Card embeds responsive sapui5 control sap.m.Table.Always limit the columns to three.Only Three lines will be shown in each row of the table.The table card configurations are pretty much same like the List Card.Only addition is a column name property in annotation file.

Pre-requisites

  1. Fiori Overview Application created already.I will be using the application created in 'How to Create your first SAP Fiori Overview Page Application ? - Example using List Card' for this tutorial.
Steps

  1. First step is adding a analytic card to the fiori overview application.For this  Right click on application->new->Card.
  2. Select a card.Choose Table card  and press next button.

  3. In Card customisation section select the entityset we are going to use.I chose Employees.Give a title.title is mandatory this will be shown in the card.
  4. Scroll down to Annotations section.Give annotation path as com.sap.vocabularies.UI.v1.LineItem#Top5Employees .Here Top5Employees is Qualifier name.If you are using different qualifier make sure to replace it with yours.Press next and press finish.A new component called Table card will be added to the application.
  5. Open our localAnnotations_1.xml file and paste below code inside each record of our previous Top5Employees LineItem annotation.Here only addition is the property label value for column names..

  6. <Annotation Qualifier="Top5Employees" Term="UI.LineItem">
        <Collection>
            <Record Type="UI.DataField">
                <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance" />
                <PropertyValue Property="Label" String="Name"></PropertyValue>
                <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="UI.DataField">
                <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance" />
                <PropertyValue Property="Label" String="Designation"></PropertyValue>
                <PropertyValue Path="Title" Property="Value" />
            </Record>
            <Record Type="UI.DataField">
                <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance" />
                <PropertyValue Property="Label" String="Address"></PropertyValue>
                <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>
    

  7. Now our Fiori Overview Application will have the Table Card.See screenshots



If you enjoyed this post, Please Share!!

1 comments :

Powered by Blogger.