List report : Adding a Contact Quick View to a Table without CDS

[Joseph_BERTHE]

The main purpose of this blog is to show you how to implement a Contact Quick view without CDS by using only SEGW and annotations.

Nowadays there is plenty of documentations and blogs regarding annotations and CDS, which means you need customer with HANA or at least SAP_BASIS 7.4 (which authorize CDS implementation). What I want to show is how to do Smart Template without CDS by using the transaction SEGW to create the correct Data Model.

I inspire myself by the following references to construct this blog:

• Adding Contact Card Quick View to a Table from reddypavankumar


• SAP Help: Adding a Contact Quick View to a Table

Here the result we are going to produce together 🙂

Prerequisite

To understand the following content, you should have good knowledge in :

• SAP NW Gateway : Data modeling


• SAPUI5 : Annotation concept


• SAPUI5 : Smart template


• SAPUI5 : List report

SAP Gateway part : Data Model

Let's do the data model for this exemple :



We will focus on the two entities : SOHeader and SH_Partners. The purpose of this relation is to get the detail of the SoldTo party from the Sales order.

To do so, we have to create the correct association in SEGW :



And add constraints to this association :



I will let you do the code to implement the relation inside the ZCL_*****_DPC_EXT class and in the respective methods.

That's it for the data modeling, let's carry on for the front end 🙂

Annotations

In the front end part, you have to create a SAP Fiori List Report application with the Smart template provided by the SAP Web IDE. You should point the application to the correct OData service, and then create an annotation. If you have created an SEGW project and if you do not implement any annotations in the MPC class, then the smart template should be created without any annotation file.

You should create one after all:



After adding your custom annotation file then you should add the following :

For SOHeader entity

<Annotations Target="ZJBE_DEMO_SMART_SO_SRV.SOHeader">

    <Annotation Term="UI.LineItem">

        <Collection>

            <Record Type="UI.DataField">

                <PropertyValue Property="Value" Path="Vbeln" />

            </Record>

            <Record Type="UI.DataField">

                <PropertyValue Property="Value" Path="Netwr" />

            </Record>

            <Record Type="UI.DataField">

                <PropertyValue Property="Value" Path="Waerk" />

            </Record>

            <Record Type="UI.DataField">

                <PropertyValue Property="Value" Path="Auart" />

            </Record>

            <Record Type="UI.DataFieldForAnnotation">

                <PropertyValue Property="Label" String="Test" />

                <PropertyValue Property="Target" AnnotationPath="to_SoldTo/@vCard.Contact" />

            </Record>

        </Collection>

    </Annotation>

</Annotations>

Take a look at the last record from the UI.LineItem collection. We have used an UI.DataFieldForAnnotation which have a label (for the column title) and a target for the Contact Quick View.

Note: When doing this with the Annotation editor, the association to_SoldTo wasn't visible, so I do it in the XML editor by myself.

For SH_Partners entity

<Annotations Target="ZJBE_DEMO_SMART_SO_SRV.SH_Partner">

    <Annotation Term="vCard.Contact">

        <Record Type="vCard.ContactType">

            <PropertyValue Property="fn" Path="Name" />

            <PropertyValue Property="n">

                <Record Type="vCard.NameType">

                    <PropertyValue Property="surname" Path="Name2" />

                </Record>

            </PropertyValue>

            <PropertyValue Property="tel">

                <Collection>

                    <Record Type="vCard.PhoneNumberType">

                        <PropertyValue Property="uri" Path="Telephone" />

                        <PropertyValue Property="type" EnumMember="vCard.PhoneType/home" />

                    </Record>

                </Collection>

            </PropertyValue>

        </Record>

    </Annotation>

</Annotations>

If you use the annotation editor you will be able to add much more properties in the card, but the most inport thing here is to have the fn property, otherwise, you will have an empty column. The lis report use the fn property to show it up in the column.

Conclusion

For the Fiori Element, it is not mandatory to use CDS view to do what we want. However some restriction exist with that method (without CDS, such as total and sub-total), but at least, we can play with the smart template with SEGW and annotation file "easily" and have a maximum features on it.

Enjoy 😉