Technical Articles
Steps to navigate to a canvas/custom page in List Report application
Hello All,
This blog, will give you an in-detail ,technical description on how to extend/navigate , to a custom/canvas page, from a List-report page, within a List-Report application.
The standard, List report navigation functionality, allows user to navigate to “object page”.
However, at times, we might require to navigate to a custom/canvas view.
The basic idea is to, call a second component(“flightcrud.Comp2”) from first component(“flightcrud”).
To get an idea, about canvas page, please refer to below link, form ui5 demokit:
https://sapui5.hana.ondemand.com/#/topic/82c4b57424804ae2bc7f937c9b403525
My system details:
Ui5 version: 1.96.5
BAS
S4 Hana-2021
Steps:
- Create a simple List-Report application, using BAS or web -IDE.My application name is “flightcud”.
- Extend the List-report page, to add a custom button/action and a controller extension, for List-report extension view.
ListReportExt
- The below link can provide an idea, to extend a list report page:
- https://blogs.sap.com/2021/04/16/extension-of-fiori-elementslist-report-object-page-using-northwind-service-in-visual-studio./#:~:text=You%20can%20use%20app%20extensions,points%2C%20depending%20on%20the%20floorplan.
- Write the navigation logic, inside action, in ListReportExt.controller.js file.
- Go to manifest.json .
- Write the code, for canvas page inside pages section of manifest.json.
- The below piece of code, needs to be written, above “models “ section, in manifest.json.
- Accordingly, you have to create a separate component/folder, named as “Comp2”, inside webapp of parent application ”flightcrud”.
- Like any other ui5 application/component, we have to create a separate “Component.js, manifest.json, view and controller ” under, Comp2 folder.
- The below piece of code , can be written , in the new/reusable component.js file, under Comp2 folder.
- The new manifest.json file under “Comp2”, can be updated as per code snippet.
-
{ "_version": "1.8.0", "sap.app": { "id": "flightcrud.comp2", "type": "component", "embeddedBy": "../", "i18n": "i18n/i18n.properties", "applicationVersion": { "version": "1.0.0" }, "title": "{{compTitle}}", "description": "{{compDescription}}" }, "sap.ui": { "technology": "UI5", "icons": { "icon": "", "favIcon": "", "phone": "", "phone@2": "", "tablet": "", "tablet@2": "" }, "deviceTypes": { "desktop": true, "tablet": true, "phone": true }, "supportedThemes": [ "sap_fiori_3" ] }, "sap.ui5": { "rootView": { "viewName": "flightcrud.Comp2.view.Detail", "type": "XML", "async": true, "id": "Detail" }, "resources": { "js": [], "css": [] }, "dependencies": { "minUI5Version": "1.96.1", "libs": { "sap.ui.core": { "lazy": false }, "sap.m": {} }, "components": {} }, "models": { "i18n": { "type": "sap.ui.model.resource.ResourceModel", "uri": "i18n/i18n.properties" } }, "contentDensities": { "compact": true, "cozy": true }, "routing": { "config": { "routerClass": "sap.m.routing.Router", "viewType": "XML", "async": true, "viewPath": "flightcrud.Comp2.view", "controlAggregation": "pages", "controlId": "app", "clearControlAggregation": true }, "routes": [ { "name": "App", "pattern": "", "target": [ "App" ] } ], "targets": { "App": { "viewName": "Detail" } } } } }
- Here we mentioned, our root view as “Detail view”.
- Similarly, we have to create view and controller , file for “Detail” within, “Comp2” folder:
- Accordingly, you can write detail view and controller code, based on your requirement.
Now we are done with our coding part:
Lets move to the output:
List report page , showing Flight list and “navigate” as the custom button/action:
Output1
- On click of “navigate” button, the relevant/new component.js, “Detail view” and “Detail controller” gets loaded. The same can be checked in “Network” tab of chrome browser.
- Please feel free, to provide your valuable suggestions, If any.
Best Regards,
Sushant
Great Blog...!!!!!!!!!
I have an additional requirement. I want to open up another screen inside the embedded custom component (Like an In-App routing navigation).
Can you help me with this?
Many Thanks
Shubham
Hi,
Thanks for the detailed blog.
Can you please tell if this approach is possible with Analytical List page app as well?
I have a requirement where in I have to navigate from ALP to custom object page.
Any leads on this are much appreciated.
Thanks and Regards,
Sugandha