Steps to navigate to a canvas/custom page in List Report application

February 16, 2023
Sara Sampaio
Technical Articles

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.