Skip to Content
Technical Articles
Author's profile photo Mahesh Palavalli

Showing an avatar with Initials or Image on the Fiori Element Object Page for a better user experience using RAP

I always felt like something is missing in all the FE Object Page apps when there is no avatar displayed in the header. I mean, just check the below image, and see how beautiful it looks with the avatar control on the object page.

 

Versus without image

 

Without an avatar, it’s just ugly, right? (In my opinion)

 

Question:

  • How to display an avatar on the object page? (Normal Image)

  • What if we don’t have an image? (And still wanted to display some alternative) Then we can show the Initials of the object (Ex. Customer Name Initials)’

Let’s see those two ways in this blog post πŸ™‚

 

What am I using to achieve this:

The example used in this blog post can be achieved easily if you have completed the below two tutorials.

  1. ABAP Cloud Platform Trial account. and ABAP RAP
  2. Business Application Studio.

 

How to display an avatar on the object page? (Normal Image)

It’s pretty easy and most of you folks know as well. It’s by using the annotation imageURL.

But how to do it in an ABAP RAP based application? One way is by using Virtual Elements.

 

And In ABAP RAP virtual elements can only be used in the CDS Projection View. So let’s create one Customer Root View .

@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Customer FE Image'
define root view entity Z_I_CUSTOMER_FE_IMAGE
  as select from /DMO/I_Customer as customer
{
  key customer.CustomerID,
      customer.FirstName,
      customer.LastName,
      customer.Title,
      customer.Street,
      customer.PostalCode,
      customer.City,
      customer.CountryCode,
      customer.PhoneNumber,
      customer.EMailAddress,
      customer._Country
}

and it’s a projection view

@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Customer FE Image'

@UI.headerInfo:{
    imageUrl: 'CustImageURL',
    title:{ value: 'CustomerID'},
    typeName: 'Customer Detail',
    typeNamePlural: 'Customers',
    description:{ value: 'FirstName' }
}


define root view entity z_c_customer_fe_image
  as projection on Z_I_CUSTOMER_FE_IMAGE as customer
{

 @UI.facet: [{
      id: 'CustomerHeader',
      purpose:  #STANDARD ,
      type:     #IDENTIFICATION_REFERENCE,
      label:    'General Information' } ]


      @UI.selectionField: [{
          position: 10
       }]
      @UI.lineItem: [{
         position: 10
       }]
      @UI.identification:[{position: 10}]
  key customer.CustomerID,
      @UI.lineItem: [{
         position: 20
       }]
      @UI.identification:[{position: 20}]
      customer.FirstName,
      @UI.lineItem: [{
         position: 30
       }]
      @UI.identification:[{position: 30}]
      customer.LastName,
      
      @ObjectModel.virtualElementCalculatedBy: 'ABAP:ZCL_VE_CUST_INITIAL'
      virtual CustImageURL: abap.string( 256 ),
      
      customer.CountryCode,
      @UI.identification:[{position: 40}]
      @UI.lineItem: [{
         position: 40
       }]
      customer.PhoneNumber,

      @UI.identification:[{position: 50}]
      @UI.lineItem: [{
         position: 50
       }]
      customer.EMailAddress,
      customer._Country
}

 

So I created the virtual element “CustImageURL” and the class ZCL_VE_CUST_INITIAL.Β  Class is as shown below:

CLASS zcl_ve_cust_initial DEFINITION
  PUBLIC
  FINAL
  CREATE PUBLIC.

  PUBLIC SECTION.
    INTERFACES if_sadl_exit_calc_element_read.
  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS zcl_ve_cust_initial IMPLEMENTATION.
  METHOD if_sadl_exit_calc_element_read~calculate.

    DATA customers TYPE STANDARD TABLE OF z_c_customer_fe_image WITH DEFAULT KEY.
    customers = CORRESPONDING #( it_original_data ).

    LOOP AT customers ASSIGNING FIELD-SYMBOL(<customer>).
      <customer>-CustImageURL = 'https://github.githubassets.com/images/modules/open_graph/github-octocat.png'.
    ENDLOOP.

    ct_calculated_data = CORRESPONDING #(  customers ).
  ENDMETHOD.

  METHOD if_sadl_exit_calc_element_read~get_calculation_info.
  ENDMETHOD.

ENDCLASS.

 

As you can see, I am just passing a dummy images URL, in normal scenarios, we will pass images based on the object ID.

 

Then create the Service Definition & Service binding.

 

Now consume the same in the Fiori List Report application generated from BAS.

Run the App and verify.

 

Showing an Image in the avatar.

 

So we are successfully able to show the image.

But what if we don’t have an image for that particular object.? Instead we can show the initials.

 

What if we don’t have an image? :- Showing Initials of an Object in avatar

 

Now let’s add another virtual element as shown below in the projection view:

      
      @ObjectModel.virtualElementCalculatedBy: 'ABAP:ZCL_VE_CUST_INITIAL'
      virtual CustInital: abap.char( 2 ),

Add the below code in the virtual element class

METHOD if_sadl_exit_calc_element_read~get_calculation_info.
    LOOP AT it_requested_calc_elements ASSIGNING FIELD-SYMBOL(<fs_calc_element>).
      CASE <fs_calc_element>.
        WHEN 'CUSTINITAL'.
          APPEND 'FIRSTNAME' TO et_requested_orig_elements.
          APPEND 'LASTNAME' TO et_requested_orig_elements.
      ENDCASE.
    ENDLOOP.
  ENDMETHOD.

Commenting the below image URL code, so the initials will appear.

  METHOD if_sadl_exit_calc_element_read~calculate.
    DATA customers TYPE STANDARD TABLE OF z_c_customer_fe_image WITH DEFAULT KEY.
    customers = CORRESPONDING #( it_original_data ).

    LOOP AT customers ASSIGNING FIELD-SYMBOL(<customer>).
      <customer>-CustInital =  |{ <customer>-FirstName(1) }{ <customer>-LastName(1) }|.
      " <customer>-CustImageURL = 'https://github.githubassets.com/images/modules/open_graph/github-octocat.png'.
    ENDLOOP.

    ct_calculated_data = CORRESPONDING #(  customers ).
  ENDMETHOD.

 

Now let’s go to the business application studio and Open the service modeler and copy the headerinfo annotation locally.

Add the below annotation and add the initials property to the path

 

Now Let’s run the app again and check.

 

So that’s it, using a simiple annotation like this can increase the UX by many folds. This is not available in ABAP yet, maybe will be released in the future by SAP. So for now, we need to add this annotation locally.

 

Git Hub URL for this ABAP project:

https://github.com/mahesh0431/abapFEImage

 

Let me know your thoughts. Do you also like showing an image on the object page? πŸ˜‰

Cheers!

Mahesh

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre Dominique
      Pierre Dominique

      Interesting, I'll try to implement something similar using CAP. Thanks for sharing!

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks for the comment dominique ??. Love to see that example soon , don’t forget to share it.. I believe it will be much easier to implement this in cap..

      Author's profile photo RAMAKRISHNAN MURUGAN
      RAMAKRISHNAN MURUGAN

      Hi Mahesh,

      I was not able to see the object page, as it's showing a blank page.

      Later I have added LINEITEMREF in my facet. While previewing it from service binding, the app works fine.

      But again it's showing a blank object page in BAS. Any idea? am I missing anything?

      I strongly feel, there is some annotation problem in BAS project.

       

      BR,

      RAM.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      I hope you did not override the facet annotations in the the BAS project in a local annotation file.

      If possible, please share your project via git, I can ha e a look at it.

      Author's profile photo RAMAKRISHNAN MURUGAN
      RAMAKRISHNAN MURUGAN

      Finally found the issue. Sharing here, as it may help others.

      I had added my service definition to an already existing service binding with a new version. So when I tried to consume this latest version in BAS project, my annotations were not been considered. That's why, the FE object page gives an empty view.

      Solution:

      Either bind your service definition with a new service binding or if you are trying to re-use an existing service binding, change your first version of service definition with your projection CDS view.

      So that automatically your project in BAS identifies your local UI annotations.

      BR,

      RaM.

       

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author
      RAMAKRISHNAN MURUGAN Great!! Thanks for sharing the solution.
      Author's profile photo Abhijnan Saha
      Abhijnan Saha

      Hi Mahesh,
      Is there a possibility by which we can control the size of the image. Somehow my image is getting cut from the sides.

       

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Hello Abhijnan, sorry, I saw this just now, I am not sure if we can do something there? Did u manage to find a solution?

      Br,

      Mahesh

      Author's profile photo sanket kulkarni
      sanket kulkarni

      Hi Mahesh,

      Thanks for this blog. I have another query to this.

      Can you please share how did you get the progress indicator in the form of the truck fill up image ?

      Can you please share the code for it ? I am trying to build something similar in RAP

      Author's profile photo sanket kulkarni
      sanket kulkarni

      Hi Mahesh,

       

      Thanks a lot for this blog, Can also share you code on how did you replace the progress indicator in header with the Truck fill up image ?

       

      I have a similar requirement but using RAP. I could use some direction from your code.

       

      Thanks in advance.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks for the feedback Sanket. I actually copy pasted it from the SAP Fiori Guidelines page πŸ™ I am not sure if it is possible. I would suggest you write a question at SAP Community : https://answers.sap.com to get more visibility to your question.

      Warm Regards,Mahesh