When we develop an application with a template based on Fiori Elements and CDS annotations, one of the main problems we usually encounter is the rigidity in the design of the user interface.

As I mentioned in the article where the creation of a List Report application with Fiori Elements and CDS Annotations was explained, it is possible to develop Fiori applications without having to introduce any line of SAPUI5 code, as long as we do not have to leave the design framework that we they enforce the SAP Web IDE auto-generated templates.

But don’t worry, everything has a solution. If we are in a project where the functionality offered by the template based on Fiori Elements serves us almost entirely, what we must implement are small Fiori extensions that allow us to expand the design based on the project requirements.

Due to the usefulness and importance that I consider that Fiori Extensions have in the new development framework proposed by SAP, I have decided to start a series of articles where I will explain several examples of interface extensions and extensions. And to start this series, we will start by looking at the Column Extensions, which, as its name suggests, is an extension that allows you to expand the List Report generated by the template in SAP Web IDE.

Need to extend our List Report

The origin of this article stems from a problem found in one of the projects that I have developed in the company where I work. In said application, a list of products was recovered where the image associated with each one of them was displayed for each record.

The main problem is that there is no CDS annotation (UI Annotation) that tells our Fiori Elements that from a URL it represents an image in the List Report. Therefore, in order to represent a column with the format we want, we must implement a Column Extension and a Cell Extension.

Extending our List Report

For the example that we are going to see, we start from a basic CDS where we retrieve some simple data from the MARA and MAKT tables. As you can see, for the example, I have inserted a field with a fixed value from a URL of an Internet image with the name “ImageTest”. Typically this URL will be generated dynamically based on the requirements of the application. In the project where I developed this extension, I generated the URL based on the material code of the form: URL_base + Matnr, using the function “Concat (arg1, arg2)” available in CDS views.

The sample CDS in the image is published as a service on the SAP S4 / HANA system. If you don’t know how to carry out this process, I recommend that you take a look at this article where it is explained how to generate the application from 0 from a CDS view.

To generate our extension, we access SAP Web IDE, right-click on our project, New -> Extension.

We select the List Report Extension option and click Next.

We select the extension of type Column. We indicate which is our data source (our entity, in this case, will be our CDS) and we assign a name to the fragment that the wizard will automatically create. Finally, we click Finish and finish the process.

Once the extension is created, we can see that a new directory has been created in our project with the name “ext”. In this directory, we will have our XML views associated with the different extensions that we create for our project. In our case, initially, we will only have a view generated by the wizard. Later we will create another one manually.

In addition to the directory for our XML views, when creating the extensions, the references to each of these will be generated in our manifest.json. In the descriptor of each of the extensions, the type of extension, the entity (data source) that we selected when creating it, and the associated XML fragment will be indicated.

For the example we are implementing, we need an additional extension. Currently, we have created a column type extension since we want to extend the List Report table with new data. However, as the data we want to represent is an image, we must create a Cell Extension where we will indicate what type of component will be represented in this new column.

To create this new extension, we will follow the two steps below:

Create a new fragment

We have to add the XML code of our component. To do this, we right-click on our view directory and select New -> File. We give it a name in the following way: viewname.fragment.xml.

We insert the following code in the new fragment, where we indicate that the component that will be represented in the column will be an image. In the path, we indicate the name of the corresponding field of our CDS.

Add the following in your manifest.json

A new cell type extension (Cell Extension) and we reference the new fragment to it. We insert this code just below our column extension:

Once our cell extension has been created, all we need to do is adjust the code of our fragment associated with the column extension, as we can see below:

It is important that we indicate our CDS field corresponding to the URL of the image in the “leadingProperty” property.

And with this, we already have our List Report extension that allows us to add a new column of type image. To do this, we have created two extensions: one of the column type (Responsive Column Extension) and one of the cell type (Responsive Cell Extension). The first indicates to our List Report that it will be necessary to represent a new column in the order that we indicate in the “columnIndex” property. Finally, in our cell extension we indicate what type of component will represent the information that we receive in our CDS field that we have associated with the “leadingProperty” property.