Hi everyone. As we know, with the development of technology, CDS views have started to be used frequently. One of the biggest reasons for their frequent use is that they can get data quickly with the push-down method and can work in harmony with many different technologies of SAP.

In this blog, I will create a service from CDS views and implement an application using various annotations. I hope it will be a fun and an informative blog.

Prerequisites

• Creating CDS view.
• SAP Development tools for Eclipse.

Procedures

1. Creating a service definition from CDS view
2. Creating a service binding from service definition
3. Developing App using annotations

Creating a Service From CDS View

In this example, a simple CDS view was created using the VBAK table.

To create a service from CDS, more than one method can be used; in this example, we created a new service using the “New Service Definition” feature.

Right click on the CDS (previously created) and click on “New Service Definition”.

You will need to enter the name and description of the service you will create. You will find the ‘Referenced Object’ field automatically filled.

Right click on the service we created in the previous step and select ‘New Service Binding’.

Click the ‘Publish’ button in the created binding service and click ‘Preview’ to try the created service in your internet browser.
Please note: Since we have not added any annotation, no data will be received when the ‘GO’ button is pressed.

Congratulations. If you’ve made it this far with me, you’ve now created a service from CDS. In the following actions we will make various changes to our service using annotations. Get ready. The fun starts now 🙂

Annotations

Many things can be said about annotations. In short ,annotation is an enabler that allows you to add code to the source code of CDS.

The annotations that can be written in the fields above the ‘define view’ are referred to as ‘HEADER ANNOTATIONS’, and the area below is referred to as ‘FIELD ANNOTATIONS’.. I will specify this when explaining each annotation.

1) Getting data

Field annotation:

@UI.lineItem: [{ {position:10 }]

For each column that you want to see in the table, you need to write this annotation at the top of the data element as shown in the picture above. Position allows you to specify the column order.

You’ve done a great job so far. You got your first data using annotations. We will continue to make changes with other annotations in the next stages.

2) Changing the key area to a darker colour

Header Annotation:

@ObjectModel.semanticKey: [‘vbeln’]

Sometimes we want some columns to appear in dark color. In such cases, we can find a solution by using the annotation above.

3) Adding a search field

Header Annotation

@Search.searchable: true

Field Annotation

@Search.defaultSearchElement: true

By using the header annotation, the search field becomes active. This field annotation (@Search.defaultSearchElement: true), should be written above the field in which we want to search in.

4)Adding Selection field

Field Annotation

@UI.selectionField: [{ {position: 10 }]

The field in which you want to use this annotation, you need to put it above that field.

5)Adding search help in Selection field

Field Annotation

@Consumption.valueHelpDefinition: [{entity:{ name:’ZC_SALES_DOC_HEADER’, element:’vbeln’ }}]

The name of the CDS view is given above as the ‘name’ – (I used the same view in order to not create a view again. If you want different fields to show up, you need to create a new CDS view. ZC_SALES_DOC_HEADER view will be shared at the end of the blog). The element part was given as vbeln because the selection field is vbeln.

6)Changing the name of table columns

Field Annotation

@EndUserText.label: ‘VBELN’

Sometimes we may want to change the text that comes as default. It makes it possible to change the text as we want using the above annotation.

7)Creating collection on detail page

Field Annotation

@UI.facet: [
{id: ‘idGeneral’,
position: 10,
type: #COLLECTION,
label: ‘General’},
{id: ‘idGeneral2’,
position: 20,
type: #COLLECTION,
label: ‘General2’, }] //

As seen in the picture below, 2 collections have been created. In the next step, data will be put into the collections. The id name we give here is important!!!

8-)Adding data into Collection

Field Annotation

@UI.facet: [
{id: ‘idGeneral’,
position: 10,
type: #COLLECTION,
label: ‘General’},
{id: ‘idGeneral2’,
position: 20,
type: #COLLECTION,
label: ‘General2’ },
{ type: #IDENTIFICATION_REFERENCE,
label: ‘General Info’,
parentId: ‘idGeneral’,
position: 10 } ,
{ type: #LINEITEM_REFERENCE,
label: ‘Table’,
parentId: ‘idGeneral2’,
position: 20 }]

This example was created using Lineitem and identification references.
When assigning data with #IDENTIFICATION_REFERENCE, we also need to use an extra @UI.identification: [{position: 10 }] annotation. When assigning data with #LINEITEM_REFERENCE, it automatically assigns all the data with the @UI.lineItem: annotation which we used in the first collection.

CDS View Code

@AbapCatalog.sqlViewName: 'ZDDL_SALES_HEADR'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Sales document header'
@Search.searchable: true
@UI.headerInfo:{title: {value: 'vbeln'},
                description.value: 'deneme'            
              }

define view ZC_SALES_DOC_HEADER
  as select from vbak


{

      @UI.facet: [
                   
                {id: 'idGeneral',
                position: 10,
                type: #COLLECTION,
                label: 'General'},

                  {id: 'idGeneral2',
                position: 20,
                type: #COLLECTION,
                label: 'General2'    },
      
               { type: #IDENTIFICATION_REFERENCE,
                label: 'General Info',
                parentId: 'idGeneral',
                position: 10 } ,
                   { type: #LINEITEM_REFERENCE,
                label: 'Table',
                parentId: 'idGeneral2',
                position: 20 },

               { purpose: #HEADER,
                position:10,
                type:#DATAPOINT_REFERENCE,
                targetQualifier: 'SalesOrg'              
                 },
                  { purpose: #HEADER,
                position:20,
                type:#DATAPOINT_REFERENCE,
                targetQualifier: 'Netvalue'}]




  
      @Search.defaultSearchElement: true
      @UI.lineItem: [{position:10 }]
      @UI.identification: [{position: 10 }]
      @ObjectModel.text.element: ['WAERK']
      @EndUserText.label: 'VBELN'
      @UI.selectionField: [{position: 10 }]
      @Consumption.valueHelpDefinition: [{entity:{ name: 'ZC_SALES_DOC_HEADER', element:'vbeln' }}]
  key vbeln,
      @UI.lineItem: [{position:20 }]
      @UI.dataPoint:{qualifier: 'SalesOrg' ,title: 'Sales Organisation'}

  key vkorg,
      @UI.lineItem: [{position:30 }]
      waerk,
      @UI.lineItem: [{position:40 }]
      @UI.multiLineText: true
      auart,
      

      @UI.lineItem: [{position:50 }]
      @UI.dataPoint:{qualifier: 'Netvalue' ,title: 'Net Value'}
      netwr

}

Summary

We created a service from the CDS view. In the created service, the desired changes were made to the interface using annotations.

Conclusion

If you don’t want to create a very complex and complicated service, you can create the service you want using simple CDS with simple annotations. If you have any questions, please do not hesitate to  contact me in the comments section or in our SAP Community. You can also access more detailed SAP Blogs  about CDS.