SAP Fiori Elements: Add Object Page CUD Option for...

peterwidmer · ‎08-14-2020

Hi all,

sometimes your requirement for a SAP Fiori Elements design requires you to have a list of records on your Object Page. This blog post deals with an edge case, I hope it can help you prevent a lot of time!

Introduction

Imagine a use-case (as mentioned in this blog post, published by Alexandre) where your first screen is a List Report, containing a catalog of multiple offices. By digging into one office, you are given workstations and employees working in the respective office.

And here we are, requiring two lists (besides some header information regarding the office, like name or location) on our second screen, the Overview Page.

As we can define multiple associations with proper annotations for our ABAP CDS View, this is not an issue, right?

Well.. more or less. Displaying the two entities and their information is easy, I agree.

But as soon as you want to create or update an entity, you will face an issue in the automatically created SAP Fiori Elements app: The needed buttons for creating and updating are only visible for a single entity, either the first or the second one. Never both.

Why does this error occur at all?

This problem is caused by the SAP Web IDE Wizard you are using for creating a project from a template (common practice if you create a SAP Fiori Elements application from scratch).

After successfully connecting to your backend system, the SAP Web IDE Wizard provides the opportunity to add a navigation path before finalizing the project. But only one navigation entity is allowed:

Therefore, the metadata is built for only one entity, not two. The ABAP CDS View annotations do help to display the second entity, but not properly.

The Delete functionality is available for both associations since there is no navigation needed in order to perform this kind of operation on an entity.

How to fix the error

So let's check what needs to be added to enable Create and Delete functionality.

In the automatically created manifest.json file, navigate through the JSON nodes as follow:

"sap.ui.generic.app" → "pages" → "ListReport|[your_entity_name]" → "pages" → "ObjectPage|[your_entity_name]" → "pages"

Right here, in the pages of the Object Page, you will see one navigation property defined:

{

   "ObjectPage|to_Employee":{

      "navigationProperty":"to_Employee",

      "entitySet":"ZEmployee",

      "component":{

         "name":"sap.suite.ui.generic.template.ObjectPage"

      },

      "pages":{

         "ObjectPage|to_Office":{

            "navigationProperty":"to_Office",

            "entitySet":"ZOffice",

            "component":{

               "name":"sap.suite.ui.generic.template.ObjectPage"

            }

         }

      }

   }

}

The entity which is shown at this upper place is based on your chosen OData Navigation in the previous Wizard step. To show the Create and Update buttons for the second entity, simply add the missing equivalent to the "pages" node (including the backward navigation to_Office😞

{

   "pages":{

      "ObjectPage|to_Employee":{

         "navigationProperty":"to_Employee",

         "entitySet":"ZEmployee",

         "component":{

            "name":"sap.suite.ui.generic.template.ObjectPage"

         },

         "pages":{

            "ObjectPage|to_Office":{

               "navigationProperty":"to_Office",

               "entitySet":"ZOffice",

               "component":{

                  "name":"sap.suite.ui.generic.template.ObjectPage"

               }

            }

         }

      },

      "ObjectPage|to_Workstation":{

         "navigationProperty":"to_Workstation",

         "entitySet":"ZWorkstation",

         "component":{

            "name":"sap.suite.ui.generic.template.ObjectPage"

         },

         "pages":{

            "ObjectPage|to_Office":{

               "navigationProperty":"to_Office",

               "entitySet":"ZOffice",

               "component":{

                  "name":"sap.suite.ui.generic.template.ObjectPage"

               }

            }

         }

      }

   }

}

This results in the holistically successful load of the metadata during runtime. All buttons (if correctly annotated) Create, Update and Delete will be visible. Of course, this solution works for not only two associations!