Intro

Many of you probably may have observed that the MyInbox has an option to generate the UI based on the annotations but the information you may get from the help or online(questions&blogs) is very limited.

So recently there was this question in the community about generating the UI based on the annotations in the MyInbox app. So I started to check the possibility by searching the old questions and blogs..Then I came across this well written blog by Ragini Upadhyay which kick started my understanding the UI generation via annotations.. Then I started to dig the MyInbox app code and the purchase order annotations and was able to create a basic app.

Target

This blog will give you a basic idea of how to generate the UI for MyInbox based on the annotations and is targeted for those how have good understanding of ABAP Programming model for Fiori

We will discuss two things in this blog.

1. How to use the UI.Facet annotations in the CDS view
2. How to generate the UI using the annotations in the MyInbox

System I used is S4HANA 1809. Not sure if the annotations that I used will work in the older systems.

I’ve taken the Flight data model as I was lazy to create a proper example 😀 and so I am using the same code base which I used for testing.

End Result:

At the end of following all the steps, we will be able to generate the annotation based UI in the MyInbox app as shown above

BTW SAP team designed the annotation based UI very nicely which is based on XML templating. Kudos to the team behind it!! You can check the code in the “annotationsBasedTaskUI” folder of the MyInbox app.

Break down of the annotations used to generate the above UI

I will breakdown the UI into 4 parts

1. Header information
2. Body -> where we will show the actual data of the root CDS view
3. Footer(Associated child entities)-> we will show the associated child data
4. Child navigation to Detail page(from the footer/associated child entities)

Header Information:

In the header, to show the title & description, we will use the regular headerInfo annotation,

@UI.headerInfo:{
    title.value: 'carrid',
    title.url: 'url',
    description.value: 'carrname'
}

Body:

For showing the data in the body, I used field groups. Even after using them, the UI will not generate as it requires Facet annotation. 

      @UI.fieldGroup: [{
        // Qualifier is mandatory as this is
        // the way to distinguish between
        // Multiple groups
        qualifier: 'one',
        position: 10
       }]
      @UI.identification: [{position: 10 }]
  key scarr.carrid,
      @UI.fieldGroup: [{
        qualifier: 'two',
        position: 10
      }]
      @UI.identification: [{position: 20 }]
      scarr.carrname,
      @UI.fieldGroup: [{
        qualifier: 'two',
        position: 20
      }]

So after adding the fieldGroup, we need to add the Facet information to the CDS view.

UI.facet

The example that I referred was purchase order release approval workflow where they generate the Facet releated annotations in the MPC Extension class.

I was lazy and didn’t want to code in the MPC_EXT class 😀 so started searching for the facet annotations in the CDS view level and again very limited information on this topic. (Not sure if it is released for the customer). But anyway ended up spending a lot of time 😀 should have gone with the MPC_EXT based annotations 😀

So after multiple trail & errors I’ve found that it should be added like show below:

@UI.facet: [
      // This is for the body
     { // This tells it is a collection of facet
       // under that we will have reference facets
        id: 'GeneralInformation',
       // Summary is mandatory,
       // MyInbox generetes the Body based on this
        isSummary: true, 
        type: #COLLECTION
     },
     // The below two are reference facets
     {
     // Need to mention the parent Id so the field group
     // that is linked to below qualifier will be added to the facet
       parentId: 'GeneralInformation',
       id:'group1Information',
       type: #FIELDGROUP_REFERENCE,
       targetQualifier: 'two',
       label: 'Group 1'
     },
     {
       parentId: 'GeneralInformation',
       id:'group2Information',
       type: #FIELDGROUP_REFERENCE,
       targetQualifier: 'one',
       label: 'Group 2'
     }
      // Items will be added below, will show later
]

The above code is self explanatory and this information will be general and not specific to myinbox. We can use the Facet annotation to create the facets in the listreport object page as well.

Footer(Associated child entities)

In the above code, I’ve mentioned in the comment at the end that “Items will be added below”, we have to add the items facet annotations there.

{
   id:'lineItems',
   type: #LINEITEM_REFERENCE,
   targetElement: '_Flight',
   label: 'Flights'
}

Now one thing I’ve noticed is that the Items should have the Importance as High or else it is not displaying the fields as the table columns. Also, it seems you can display the Form as well in the footer(child)(If you have 1:1 cardinality child)

Child Navigation to Detail Page

If you navigate to detail page from the line Items, you will see a blank page. So to show the information, we need to maintain the similar facet information in the flights CDS view.

@UI.facet: [
      // This is for the body
      {
        id: 'GeneralInformationFlights',
        isSummary: true,
        type: #COLLECTION
       },
        {
       parentId: 'GeneralInformationFlights',
       id:'group1Information',
       type: #FIELDGROUP_REFERENCE,
       targetQualifier: 'one',
       label: 'Item Group 1'
       }]

      @UI.fieldGroup: [{
        // Qualifier is mandatory as this is
        // the way to distinguish between
        // Multiple groups
        qualifier: 'one',
        position: 10
       }]
  key spfli.carrid,
      @UI.fieldGroup: [{
        qualifier: 'one',
        position: 20
       }]
  @UI.lineItem:{position: 10, importance: #HIGH}
  key spfli.connid,
      @UI.fieldGroup: [{
        qualifier: 'one',
        position: 30
       }]
  @UI.lineItem:{position: 20, importance: #HIGH}
      spfli.countryfr,

CDS Views Code

I am pasting all the CDS views code for the reference.

@AbapCatalog.sqlViewName: 'ZVCCARRIER'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Carrier'
@VDM.viewType: #CONSUMPTION
@OData:{
    publish: true
}
@UI.headerInfo:{
    title.value: 'carrid',
    title.url: 'url',
    description.value: 'carrname'
}
define view ZC_Carrier
  as select from scarr
  association [0..*] to ZC_Flight as _Flight on _Flight.carrid = $projection.carrid
{
      @UI.facet: [
      // This is for the body
      {
        id: 'GeneralInformation',
        isSummary: true,
        type: #COLLECTION
       },
        {
       parentId: 'GeneralInformation',
       id:'group1Information',
       type: #FIELDGROUP_REFERENCE,
       targetQualifier: 'two',
       label: 'Group 1'
       },
       {
       parentId: 'GeneralInformation',
       id:'group2Information',
       type: #FIELDGROUP_REFERENCE,
       targetQualifier: 'one',
       label: 'Group 2'
       },
       // This is for the Items
       {
       id:'lineItems',
       type: #LINEITEM_REFERENCE,
       targetElement: '_Flight',
       label: 'Flights'
       }]

      @UI.fieldGroup: [{
        // Qualifier is mandatory as this is
        // the way to distinguish between
        // Multiple groups
        qualifier: 'one',
        position: 10
       }]
      @UI.identification: [{position: 10 }]
  key scarr.carrid,
      @UI.fieldGroup: [{
        qualifier: 'two',
        position: 10
      }]
      @UI.identification: [{position: 20 }]
      scarr.carrname,
      @UI.fieldGroup: [{
        qualifier: 'two',
        position: 20
      }]
      @UI.identification: [{position: 30 }]
      @Semantics.currencyCode: true
      scarr.currcode,
      @UI.identification: [{position: 40 }]
      scarr.url,
      @ObjectModel.association.type: [#TO_COMPOSITION_CHILD]
      _Flight
}

@AbapCatalog.sqlViewName: 'ZVC_FLIGHT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Flights'
@UI.headerInfo:{
  typeNamePlural: 'Flights',
  typeName: 'Flight'
}
define view ZC_Flight
  as select from spfli
  association [1..1] to ZC_Carrier as _carrier on _carrier.carrid = $projection.carrid
{

  key spfli.carrid,
  @UI.lineItem:{position: 10, importance: #HIGH}
  key spfli.connid,
  @UI.lineItem:{position: 20, importance: #HIGH}
      spfli.countryfr,
  @UI.lineItem:{position: 30, importance: #HIGH}
      spfli.countryto,
  @UI.lineItem:{position: 40, importance: #HIGH}
      spfli.cityfrom,
  @UI.lineItem:{position: 50, importance: #HIGH}
      spfli.cityto,
  @UI.lineItem:{position: 60, importance: #HIGH}
      spfli.distance,
      @ObjectModel.association:{ type: [ #TO_COMPOSITION_PARENT, #TO_COMPOSITION_ROOT ] }
      _carrier
}

Task Configuration

Now once our CDS view is created it will generate the OData service, which will need to provide in the SWFVISU task.

BTW I created this dummy test workflow and a copied the decision task 😀

Conclusion

So using this approach, we can generate the UI based on annotations for specific tasks without using the custom UI5 application UI integration(Intent based navigation).

The generation of the body & footer(child associations) parts are tightly integrated with the UI.facet annotation. We can also generate them by coding manually in the MPC_EXT class which the standard PO release app is doing.

The UI.facet annotations can be used in the regular list report template apps as well.

One thing I found difficult is that I was not able to show the Number & Currency at the right side of the view in the header section as they are using the UI.dataPoint annotations with some hardcoded “Qualifiers”. I tried to give the qualifier annotation under UI.dataPoint in the CDS view but it seems that option is not available. So I guess this has to be done at the MPC_EXT class only or Maybe someone can help?

I also have not covered all the annotations that will be utilized by the MyInbox app like the links & data field navigation which are working fine.

Please do leave a comment if you think I’ve missed anything in my analysis and your feedback is highly appreciated 🙂

This is a genral information which will be very useful for those who are in the older versions.. (Not specifically related to MYInbox)… By Krishna Kishor Kammaje  comment

I had done this sometime back but on a non-HANA lower than 740 NW system. So went for a regular OData service (not CDS based). I created all my annotations in an XML file, uploaded it as a BSP project in GW system so that I have a URL to access the annotation file (to mention in the SWFIVISU). Another use case to do this way is in a case where you already have an OData service and you just want to reuse it for My-Inbox with annotations.

Thanks & Regards,

Mahesh