cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

Object Page in Fiori List Report is blank (Column header and Data from CDS view not getting loaded)

Go to solution
johneyclement
Explorer

‎2024 Jun 18 2:00 PM - edited ‎2024 Jun 19 8:08 AM

0 Kudos
2,729

Dear Experts,

I have created two consumption cds views where each one is associated to the other cds view. They are activated properly and odata services are also activated.

I am sharing the code for the cds views below:

CDS View 1: zc_flights

 

@AbapCatalog.sqlViewName: 'ZCFLIGHTS'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Consumption view for Flights'
@VDM.viewType: #CONSUMPTION
@OData.publish: true
define view zc_flights as select from zi_flights as consumptionFlights
association [0..*] to zc_flightbooking as _consumptionFlightBooking
on  consumptionFlights.Airline = _consumptionFlightBooking.Airline
and consumptionFlights.FlightNumber = _consumptionFlightBooking.FlightNumber
and consumptionFlights.FlightDate = _consumptionFlightBooking.FlightDate
{   
    .lineItem.position: 1
    @EndUserText.label: 'Airline'
    key Airline,
    .lineItem.position: 2
    @EndUserText.label: 'Flight Number'
    key FlightNumber,
    .lineItem.position: 3
    @EndUserText.label: 'Flight Date'
    key FlightDate,
    .lineItem.position: 4
    @EndUserText.label: 'Plane Type'
    PlaneType,
    .lineItem.position: 5
    @EndUserText.label: 'From City'
    CityFrom,
    .lineItem.position: 6
    @EndUserText.label: 'To City'
    CityTo,
    /* Associations */
    //_compositeFlightBooking,
    _consumptionFlightBooking
    
}

 

CDS View 2: zc_flightbooking

 

@AbapCatalog.sqlViewName: 'ZCFLIGHTBOOKING'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Consumption view for Flight Booking'
@VDM.viewType: #CONSUMPTION
@OData.publish: true
define view zc_flightbooking as select from zi_flightbooking as consumptionFlightBooking
association [1..1] to zc_flights as _consumptionFlight
on  consumptionFlightBooking.Airline = _consumptionFlight.Airline
and consumptionFlightBooking.FlightNumber = _consumptionFlight.FlightNumber
and consumptionFlightBooking.FlightDate = _consumptionFlight.FlightDate
{
    .lineItem.position: 1
    @EndUserText.label: 'Airline'
    key Airline,
    .lineItem.position: 2
    @EndUserText.label: 'Flight Number'
    key FlightNumber,
    .lineItem.position: 3
    @EndUserText.label: 'Flight Date'
    key FlightDate,
    .lineItem.position: 4
    @EndUserText.label: 'Flight Booking'
    key FlightBooking,
    .lineItem.position: 5
    @EndUserText.label: 'Flight Customer'
    FlightCustomer,
    .lineItem.position: 6
    @EndUserText.label: 'Customer Name'
    CustomerName,
    .lineItem.position: 7
    @EndUserText.label: 'Customer City'
    CustomerCity,
    /* Associations */
    //_compositeFlight
    _consumptionFlight
}

 

 

 

Now, I have created a fiori application with following settings:

Template: List Report Page

Main Entity: zc_flight (1st cds view)

Navigation Entity: to_consumptionFlightBooking (because of association to 2nd cds view)

johneyclement_0-1718714276928.png

Now, after generating the project and when I try to run the application, the object page corresponding to the first cds view works well in fiori. But when I navigate to the second object page by clicking on a line item, I only get a blank screen where both the data and column headers are not present.

Object Page corresponding to main entity (loads initially when I run the application):

johneyclement_1-1718714549016.png

Object page corresponding to navigation entity (after clicking on a line item):

johneyclement_2-1718714653610.png

My expected result is that I need the output from the second cds view to get displayed when I navigate to the second object page. I have already checked the associations in the cds view and they are working fine.

Also including some code from webapp files of the Fiori application:

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flight Booking App</title>
    <style>
        html, body, body > div, #container, #container-uiarea {
            height: 100%;
        }
    </style>
    <script
        id="sap-ui-bootstrap"
        src="resources/sap-ui-core.js"
        data-sap-ui-theme="sap_horizon"
        data-sap-ui-resourceroots='{
            "project2": "./"
        }'
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-frameOptions="trusted"
    ></script>
</head>
<body class="sapUiBody sapUiSizeCompact" id="content">
    <div
        data-sap-ui-component
        data-name="project2"
        data-id="container"
        data-settings='{"id" : "project2"}'
        data-handle-validation="true"
    ></div>
</body>
</html>

 

manifest.json

 

{
  "_version": "1.53.0",
  "sap.app": {
    "id": "project2",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "sourceTemplate": {
      "id": "@sap/generator-fiori:lrop",
      "version": "1.12.3",
      "toolsId": "8eceb3b9-5057-4f33-99df-633c2d4b679b"
    },
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/ZC_FLIGHTS_CDS/",
        "type": "OData",
        "settings": {
          "annotations": [
            "ZC_FLIGHTS_CDS_VAN",
            "annotation"
          ],
          "localUri": "localService/metadata.xml",
          "odataVersion": "2.0"
        }
      },
      "ZC_FLIGHTS_CDS_VAN": {
        "uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZC_FLIGHTS_CDS_VAN',Version='0001')/$value/",
        "type": "ODataAnnotation",
        "settings": {
          "localUri": "localService/ZC_FLIGHTS_CDS_VAN.xml"
        }
      },
      "annotation": {
        "type": "ODataAnnotation",
        "uri": "annotations/annotation.xml",
        "settings": {
          "localUri": "annotations/annotation.xml"
        }
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.114.9",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.ushell": {},
        "sap.f": {},
        "sap.ui.comp": {},
        "sap.ui.generic.app": {},
        "sap.suite.ui.generic.template": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "project2.i18n.i18n"
        }
      },
      "": {
        "dataSource": "mainService",
        "preload": true,
        "settings": {
          "defaultBindingMode": "TwoWay",
          "defaultCountMode": "Inline",
          "refreshAfterChange": false,
          "metadataUrlParams": {
            "sap-value-list": "none"
          }
        }
      },
      "@i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "uri": "i18n/i18n.properties"
      }
    },
    "resources": {
      "css": []
    },
    "routing": {
      "config": {},
      "routes": [],
      "targets": {}
    }
  },
  "sap.ui.generic.app": {
    "_version": "1.3.0",
    "settings": {
      "forceGlobalRefresh": false,
      "objectPageHeaderType": "Dynamic",
      "considerAnalyticalParameters": true,
      "showDraftToggle": false
    },
    "pages": {
      "ListReport|zc_flights": {
        "entitySet": "zc_flights",
        "component": {
          "name": "sap.suite.ui.generic.template.ListReport",
          "list": true,
          "settings": {
            "condensedTableLayout": true,
            "smartVariantManagement": true,
            "enableTableFilterInPageVariant": true,
            "filterSettings": {
              "dateSettings": {
                "useDateRange": true
              }
            }
          }
        },
        "pages": {
          "ObjectPage|zc_flights": {
            "entitySet": "zc_flights",
            "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen",
            "component": {
              "name": "sap.suite.ui.generic.template.ObjectPage"
            },
            "pages": {
              "ObjectPage|to_consumptionFlightBooking": {
                "navigationProperty": "to_consumptionFlightBooking",
                "entitySet": "zc_flightbooking",
                "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen",
                "component": {
                  "name": "sap.suite.ui.generic.template.ObjectPage"
                }
              }
            }
          }
        }
      }
    }
  },
  "sap.fiori": {
    "registrationIds": [],
    "archeType": "transactional"
  }
}

 

component.json

 

sap.ui.define(
    ["sap/suite/ui/generic/template/lib/AppComponent"],
    function (Component) {
        "use strict";

        return Component.extend("project2.Component", {
            metadata: {
                manifest: "json"
            }
        });
    }
);

 

zc_flights_cds_van.xml

 

<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx">
    <edmx:Reference Uri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_COMMON',Version='0001',SAP__Origin='LOCAL')/$value">
        <edmx:Include Namespace="com.sap.vocabularies.Common.v1" Alias="Common"/>
    </edmx:Reference>
    <edmx:Reference Uri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_UI',Version='0001',SAP__Origin='LOCAL')/$value">
        <edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>
    </edmx:Reference>
    <edmx:Reference Uri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_COMMUNICATION',Version='0001',SAP__Origin='LOCAL')/$value">
        <edmx:Include Namespace="com.sap.vocabularies.Communication.v1" Alias="Communication"/>
    </edmx:Reference>
    <edmx:Reference Uri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_PERSONALDATA',Version='0001',SAP__Origin='LOCAL')/$value">
        <edmx:Include Namespace="com.sap.vocabularies.PersonalData.v1" Alias="PersonalData"/>
    </edmx:Reference>
    <edmx:Reference Uri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_VALIDATION',Version='0001',SAP__Origin='LOCAL')/$value">
        <edmx:Include Namespace="Org.OData.Validation.V1" Alias="Validation"/>
    </edmx:Reference>
    <edmx:Reference Uri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_ANALYTICS',Version='0001',SAP__Origin='LOCAL')/$value">
        <edmx:Include Namespace="com.sap.vocabularies.Analytics.v1" Alias="Analytics"/>
    </edmx:Reference>
    <edmx:Reference Uri="../../catalogservice;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_HTML5',Version='0001',SAP__Origin='LOCAL')/$value">
        <edmx:Include Namespace="com.sap.vocabularies.HTML5.v1" Alias="HTML5"/>
    </edmx:Reference>
    <edmx:Reference Uri="../../../sap/zc_flights_cds/$metadata">
        <edmx:Include Namespace="ZC_FLIGHTS_CDS" Alias="SAP"/>
    </edmx:Reference>
    <edmx:DataServices>
        <Schema Namespace="zc_flights_cds_van.v1" xmlns="http://docs.oasis-open.org/odata/ns/edm">
            <Annotations Target="ZC_FLIGHTS_CDS.zc_flightbookingType">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="Airline"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="FlightNumber"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="FlightDate"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="FlightBooking"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="FlightCustomer"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="CustomerName"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="CustomerCity"/>
                        </Record>
                    </Collection>
                </Annotation>
            </Annotations>
            <Annotations Target="ZC_FLIGHTS_CDS.zc_flightsType">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="Airline"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="FlightNumber"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="FlightDate"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="PlaneType"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="CityFrom"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="CityTo"/>
                        </Record>
                    </Collection>
                </Annotation>
            </Annotations>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>

 

annotation.xml

 

<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
    <edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/Common.xml">
        <edmx:Include Namespace="com.sap.vocabularies.Common.v1" Alias="Common"/>
    </edmx:Reference>
    <edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/UI.xml">
        <edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>
    </edmx:Reference>
    <edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/Communication.xml">
        <edmx:Include Namespace="com.sap.vocabularies.Communication.v1" Alias="Communication"/>
    </edmx:Reference>
    <edmx:Reference Uri="/sap/opu/odata/sap/ZC_FLIGHTS_CDS/$metadata">
        <edmx:Include Namespace="ZC_FLIGHTS_CDS" Alias="SAP"/>
    </edmx:Reference>
    <edmx:DataServices>
        <Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="local">
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>

 

I am not sure why I am not getting the expected output. I humbly request some help on fixing the above issue. 

Thank you!

Know the answer?

Help others by sharing your knowledge.

Answer

Need more details?

Request clarification before answering.

Show replies
Show replies
View Entire Topic
junwu
SAP Champion
SAP Champion
‎2024 Jun 18 4:50 PM
0 Kudos

I don't see you have defined annotation for the object page.

Show replies
Show replies
johneyclement
Explorer
‎2024 Jun 19 7:16 AM
0 Kudos

Hi,
I have defined the annotations in my cds view. Am I supposed to add something else?

junwu
SAP Champion
SAP Champion
‎2024 Jun 19 1:58 PM
0 Kudos
of course, the annotation you have is not for rendering object page. you need facet annotation https://github.com/SAP-samples/abap-platform-rap100/blob/main/src/zrap100_c_traveltp_sol.ddlx.asddlx...
johneyclement
Explorer
‎2024 Jun 24 10:29 AM
0 Kudos

Hi,
I added the following UI facet annotation to my base cds view. But this does not resolve my issue.

 

 

.facet: [ {

id: 'FlightBooking',

purpose: #STANDARD,

type: #IDENTIFICATION_REFERENCE,

label: 'Flight Booking Details',

position: 1

} ]

 

 

 

Additionally, I have also included the following code for some fields in the cds view:

 

    .identification.position: 1
    .identification.label: 'Airline'
    key Airline,

 


The result has the fields which has UI.identification annotations. But they don't contain the associated CDS view as a list below it:

johneyclement_0-1719221793760.png

junwu
SAP Champion
SAP Champion
‎2024 Jun 24 2:16 PM
0 Kudos

you need more annotation. hopefully you can get some idea from this example.

you need to refer to the lineitem annotation to include the item in your object page.

 

 

.facet: [
{   
    id: 'Hdr',
    purpose: #HEADER,    
    position: 10,   
    type: #FIELDGROUP_REFERENCE,
    targetQualifier: 'HdrInfo'
},
{   
    id: 'SoHdr',
    purpose: #STANDARD,    
    position: 10,   
    label: 'Header Details',
    type: #IDENTIFICATION_REFERENCE    
},
{   
    id: 'SoItm',
    purpose: #STANDARD,    
    position: 20,   
    label: 'Item Details',
    type: #LINEITEM_REFERENCE,
    targetElement: '_itm'
}]

 

 

johneyclement
Explorer
‎2024 Jun 26 4:44 PM
0 Kudos
Facet annotation of type: #LINEITEM_REFERENCE helped. Thanks a lot 🙂
Ask a Question