Fiori List Report Navigation to custom view

[VincentBloem]

Hi Experts,

I have a question about Fiori List Reports.

From the list report you can navigate to a detail page. Standard this is an object page.

But I want to navigate to a custom build view (Details.view.xml)

This should be possible using this code:

https://ui5.sap.com/#/topic/82c4b57424804ae2bc7f937c9b403525

"sap.ui.generic.app": {   
    ...   
        "pages": {
            "thePageName": {     
                "component": {         
                    "name": "sap.suite.ui.generic.template.Canvas",
                    "settings": {
                    }   
                },
                "implementingComponent": {                             
                    "componentName": "theImplementingComponentQualifiedName",
                        "settings": {                                   
                        ...                             
                    }
                }
            }                       
        },
        ...
}
...

But what do i have to fill in in the field componentName?

KR,

Vincent

[VincentBloem · Accepted solution]

Problem solved.

I added this to the manifest of the list report:

"pages": {
"ListReport|ZC_HR_NA2_RAPPORT": {
"entitySet": "ZC_HR_NA2_RAPPORT",
"component": {
"name": "sap.suite.ui.generic.template.ListReport",
"list": true,
"settings": {
"condensedTableLayout": true,
"smartVariantManagement": true
}
},
"pages": {
"ObjectPage|ZC_HR_NA2_RAPPORT": {
"entitySet": "ZC_HR_NA2_RAPPORT",
"component": {
"name": "sap.suite.ui.generic.template.Canvas",
"settings": {}
},
"implementingComponent": {
"componentName": "zhrnevenactiviteiten",
"settings": {}
}
}
}
}
}

then, added this:

"sap.ui5": {
"resourceRoots": {
"zhrnevenactiviteiten": "../../zhrnevenact/"
},

the name zhrnevenact, is the name of the app deployed on your sap system.

and added this:

"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.ui.core": {
"lazy": false
},
"sap.ui.generic.app": {
"lazy": false
},
"sap.suite.ui.generic.template": {
"lazy": false
},
"sap.ui.fl": {}
},
"components": {
"nevenactiviteitweergeven": {
"lazy": true
}
}

in the reused component, add this code to the component.js:

sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"com/ugent/hr/nevenactiviteiten/rapport/zhrnevenactiviteiten/zhrnevenactiviteiten/model/models",
"sap/suite/ui/generic/template/extensionAPI/ReuseComponentSupport"
], function (UIComponent, Device, models, ReuseComponentSupport) {
"use strict";
return UIComponent.extend("com.ugent.hr.nevenactiviteiten.rapport.zhrnevenactiviteiten.zhrnevenactiviteiten.Component", {
metadata: {
manifest: "json"
},

init: function () {

//Transform this component into a reuse component for Fiori Elements:
ReuseComponentSupport.mixInto(this, "myPropertiesModelName");

...

After navigation, the component is succesfully loaded! 🙂

[WouterLemaire]

I guess it is not completely clear. Your detail view should not be in the same app as your fiori elements but you have to create a reusable component. A reusable component is basically another UI5 app that can be reused in several other apps. It requires some additional configuration to be adapted in a fiori element.

This means you have to create a separate UI5 app and use the namespace + appname as componentName in the fiori elements config.

This is how to create a reusable component for fiori elements: https://ui5.sap.com/#/topic/6314fcd2510648fbaad3cee8a421030d.html

[VincentBloem]

Hi Wouter,

So I guess I have to use this piece of code than to navigate to my component:

...   
"embeddedComponents": {       
    "myComponentEmbedding": {         
        "id": "myComponentEmbedding",         
        "componentName": "theEmbeddedComponent",                 
        "title": "{{I18N_KEY_FOR_REUSE_COMPONENT_TITLE}}",         
        "settings": { 
            "documentNumber": "{documentNumber}"
            },         
        "pages":{
            // add sub-pages here
        }
    }
}

But how do I navigate to the specific view of my reused component?

[maheshpalavalli]

vincentbloem, using fiori elements reuse component framework (via mixin) won't have routing capabilities as per my understanding. So in the reuse component itself, you need to create the view and show it (without routing). probably you can show views dynamically if you can pass some parameter from the main component to reuse component.Note: the component reuse development will be different in this case compared to regular ui5 component reuse, all the details are provided in the document url that wouter has given

[VincentBloem]

Hi Mahesh Kumar Palavalli,

So I made a new component "zhrnevenact" with one view "Details".

I added this in the manifest of the list report:

"pages": {
"ListReport|ZC_HR_NA2_RAPPORT": {
"entitySet": "ZC_HR_NA2_RAPPORT",
"component": {
"name": "sap.suite.ui.generic.template.ListReport",
"list": true,
"settings": {
"condensedTableLayout": true,
"smartVariantManagement": true
}
},
"pages": {
"ObjectPage|ZC_HR_NA2_RAPPORT": {
"entitySet": "ZC_HR_NA2_RAPPORT",
"component": {
"name": "sap.suite.ui.generic.template.Canvas",
"settings": {}
},
"implementingComponent": {
"componentName": "sap.bc.ui5_ui5.sap.ZHRNEVENACT",
"settings": {}
}
}
}
}

"componentName": "sap.bc.ui5_ui5.sap.ZHRNEVENACT"

When I navigate in the list report I get the errormessage:

Is the component name correct?

My application is deployed in:

https://xxxx.xxxx.xxxx.xx:xxxxx/sap/bc/ui5_ui5/sap/ZHRNEVENACT/Component.js

What is wrong in my configuration?

KR,

Vincent

[WouterLemaire]

Can you share the console logs? Have you run the cache indexing report?

[VincentBloem]

Hi Wouter,

I changed the componentname to this:

"pages": {
"ObjectPage|ZC_HR_NA2_RAPPORT": {
"entitySet": "ZC_HR_NA2_RAPPORT",
"component": {
"name": "sap.suite.ui.generic.template.Canvas",
"settings": {}
},
"implementingComponent": {
"componentName": "ZHRNEVENACT",
"settings": {}
}
}
}

but still no results:

but my component is not deployed in the folder /sap/bc/ui5_ui5/ui2/ushel/resources.

Why is the application searching in this location?

KR,

Vincent

[maheshpalavalli]

Component name will the component namespace, for reference check the below:

https://ui5.sap.com/#/topic/1ba7f888dbf04121a62965b664496616