How to create Smart Templates annotations within CDS views – part 2

Introduction

This is the continuation of the blog started here!

This blog has been split in 3 parts:

Step 3 – Service registration and Smart Template creation in the NW Gateway and consumed by Smart Templates

In this part we are going to see how to build an SAP NW Gateway service based on the two tables created in the previous part. The service will be automatically created by the CDS infrastructure: we just need to publish it.

Once published, we can easily consume it by building a new application with SAP Web IDE starting from a Smart Template.

What we want to publish is just the main view, which, in our case, is the one named Z_SAMPLE_DEMO_PRODUCTS; with ABAP 7.5 we no longer need to go in the transaction SEGW and create a new project for the service and then publish and register the service: we just need to add the annotation

@OData.publish: true

to the first view and the CDS infrastructure will take care of creating the service for us.

Let’s see how to do it.

1 – Within Eclipse, open the first view

2 – Add the above annotation at the beginning of the file just after the 4th row, save the file and activate it

3 – The service should have been created successfully. In order to check if this is true, open the SAP GUI, connect to your backend and run the transaction

    /n /iwfnd/maint_service

    A list of all the available services appears: let’s try to add the one we just created. Click on the button Add service

4 – Enter the system alias (“LOCAL” in our case) and the first part of the name of the service. Since the service is automatically created by the CDS infrastructure a standard name is assigned to it: it’s the concatenation of the view’s name and the suffix “_CDS”. Click on the button Get Services and you should get the desired service

5 – Select the service and click on the button Add Selected Services

6 – In the Package Assignment configuration click on the Local button if you want to put this service in the $TMP package and then click on the green mark button

7 – The service has been added successfully

8 – Click on the back button

9 – Now if you filter on the Technical Service Name by the text “Z_SAMPLE*”,  you should get your new service.

10 – Select the service row and click on the button SAP Gateway Client

11 – The SAP Gateway Client opens: the path to the service is automatically displayed. Just click on the Execute button and you will get the content of the service

12 – Looking at the service’s response you can also get the complete URL path to the service. Copy it in the clipboard

13 – Open an internet browser (i.e. Chrome) and paste this URL in, then append the string “$metadata” and go to that URL: you should get the metadata information for the service.

14 – Congratulations! Your service is up and running!

Step 4 – Configure HANA Cloud Connector and create a destination

The service is ready! We just need to

1 – Start our HANA Cloud Connector

2 – Configure a virtual host for our backend system

3 – Create a destination to this virtual host inside our HCP

Step 5 – Create a new app from a Smart Template

Once your destination is in place you can create a new app from a Smart Template to start using our new service annotation.

1 – Open SAP Web IDE

2 – Do File –> New –> Project from Template

3 – Choose the Smart Template and click Next

4 – Assign a name to the project and all the required information, then click Next

5 – After selecting the Service Catalog source, enter the name of your ABAP system, filter by the string “Z_SAM” and you should find the required service. Select it and click Next

6 – At this point we guess we should have some annotation file coming from the service. Unfortunately this doesn’t happen because we have not yet defined any annotation in the main view

7 – Let’s do it! Go on Eclipse and add the following piece of code just after the odata.publish statement:

@UI.headerInfo:{

    typeName: ‘Product’,

    typeNamePlural: ‘Products’,

    imageUrl: {value: ‘PictureUrl’},

    title: {value: ‘Name’},

    description: {value: ‘Description’}

}

With this code we are just defining an annotation for the UI.HeaderInfo term located in the Object Page.

Save the file and activate it.

8 – Now (unfortunately you cannot refresh SAP Web IDE at this point, you need to refresh the page and recreate the Smart Template app again), getting to the annotation selection screen again, you should be able to see an annotation file coming from the service. You don’t have to select anything, just click Next to continue

9 – Define the data binding for the Odata Collection and the Odata Navigation and click on Finish

10 – Your app is ready! Trying to run it, you won’t get anything useful, because we have not yet annotated anything for the ListReport page.

11 – Looking at the manifest.json file, you can see that on the main service, which is the one we have created, there are attached two annotation files: one is coming from the service itself and the second one is located just inside the application. The first one is applied first, then the second is applied just over the first one

12 – By opening the annotation.xml file in the annotations subfolder with the AM, you can clearly see the part coming from the service and the one defined in the file itself. The part coming from the server cannot be deleted: it’s simply grayed out.

13 – Since we want to proceed step by step in building our application, you can delete the UI.Facets term, by clicking on the bin icon and saving the file.

Now continue with the last part, to understand how to enrich the CDS view with further annotations.