Hierarchical Tree View and Draft-Enabled Entities with Flexible Column Layout in CAP

Overview

This repository demonstrates a possible bug occurring when combining Hierarchical Tree Views with draft-enabled entities (@odata.draft.enabled) in the SAP Cloud Application Programming Model (CAP) and a Flexible Column Layout in the UI5 frontend. Two different annotation approaches for hierarchy trees both result in errors when attempting to edit an entry via the Object Page.

Prerequisites / Setup

This sample is based on the capire/bookstore repository with the following modifications:

• The example has been simplified and Genres has been renamed to Entries.
• Added a new entity Additionals which has an association to Entries.
• manifest.json has been extended with the Flexible Column Layout configuration.
• In app/entries/fiori-service.cds, @odata.draft.enabled and @fiori.draft.enabled have been added to the service projection.
• All Additonals assigned to one Entries should be rendered as a table on the Entries detail page.
• The list report selection navigates to the Entries detail page (-> TwoColumnsMidExpanded). A Additionals selection on the detail page navigates to the Additionalsdetail page (-> ThreeColumnsEndExpanded).

To reproduce:

npm run init
npm i
cds watch

Open: http://localhost:4004/fiori-apps.html#Entries-display

To switch between the two options, comment/uncomment the respective annotations in app/entries/fiori-service.cds.

---

Bug 1 – @hierarchy annotation with draft: SQLite column error on Edit

Description

When the tree table is annotated using the shorthand @hierarchy annotation (as described in the CAP documentation), navigating from a tree table entry to the Object Page and clicking Edit triggers a server-side SQLite error.

Steps to Reproduce

1. In app/entries/fiori-service.cds, enable Option 1 (@hierarchy annotation) and comment out Option 2.
2. Start the server (cds watch).
3. Open http://localhost:4004/fiori-apps.html#Entries-display.
4. Click on any entry in the tree table to open the Object Page.
5. Click Edit.

Expected Behavior

A draft should be created and the Object Page should switch to edit mode.

Actual Behavior

The CAP backend returns the following error:

{
  "error": {
    "message": "no such column: $E.LimitedDescendantCount in:\nSELECT json_insert('{}','$.\"ID\"',ID,'$.\"name\"',name,'$.\"descr\"',descr,'$.\"parent_ID\"',parent_ID,'$.\"LimitedDescendantCount\"',LimitedDescendantCount,'$.\"DistanceFromRoot\"',DistanceFromRoot,'$.\"DrillState\"',DrillState,'$.\"LimitedRank\"',LimitedRank,'$.\"HasActiveEntity\"',CASE HasActiveEntity when 1 then 'true' when 0 then 'false' END ->'$','$.\"DraftAdministrativeData_DraftUUID\"',DraftAdministrativeData_DraftUUID) as _json_ FROM (SELECT \"$E\".ID,\"$E\".name,\"$E\".descr,\"$E\".parent_ID,\"$E\".LimitedDescendantCount,\"$E\".DistanceFromRoot,\"$E\".DrillState,\"$E\".LimitedRank,? as HasActiveEntity,? as DraftAdministrativeData_DraftUUID FROM CatalogService_Entries as \"$E\" WHERE \"$E\".ID = ? LIMIT ?)",
    "code": "SQLITE_ERROR",
    "@Common.numericSeverity": 4
  }
}

---

Bug 2 – Manual hierarchy approach with draft: doReplaceWith is not a function on Edit

Description

When using the manual hierarchy annotation approach instead of the @hierarchy shorthand, the backend does not return an error, but the Fiori UI5 frontend throws a JavaScript runtime error when Edit is clicked, preventing the draft editing session from being initialized.

Steps to Reproduce

1. In app/entries/fiori-service.cds, enable Option 2 (manual hierarchy annotation) and comment out Option 1.
2. Start the server (cds watch).
3. Open http://localhost:4004/fiori-apps.html#Entries-display.
4. Click on any entry in the tree table to open the Object Page.
5. Click Edit.

Expected Behavior

A draft should be created and the Object Page should switch to edit mode.

Actual Behavior

No backend error occurs, but the browser console shows the following errors:

Failed to invoke /Entries(ID=543e93cc-c73c-4d1a-9610-20f6aa6e98f1,IsActiveEntity=true)/CatalogService.draftEdit(...)
- TypeError: this.oCache.doReplaceWith is not a function
    at E.doReplaceWith (library-preload.js)
    at l.handleOperationResult (library-preload.js)
    ...
sap.ui.model.odata.v4.ODataContextBinding

Error while editing the document - Error: this.oCache.doReplaceWith is not a function
    at Object.$ [as createDraftFromActiveDocument] (library-preload.js)
    at async n.e [as editDocument] (library-preload.js)

Uncaught (in promise) Error: Error: this.oCache.doReplaceWith is not a function