Skip to Content
Technical Articles
Author's profile photo Sushant Nath

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:

My system details:

Ui5 version: 1.96.5


S4 Hana-2021



  • 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.



  • The below link can provide an idea, to extend a list report page:
  • Write the navigation logic, inside action, in ListReportExt.controller.js file.
  • NavigationCode
  • Go to manifest.json .
  • Write the code, for canvas page inside pages section of manifest.json.
  • CanvasPageCode1
  • The below piece of code, needs to be written, above “models “ section, in manifest.json.
  • canvasPagecode2
  • Accordingly, you have to create a separate component/folder, named as “Comp2”, inside webapp of parent application ”flightcrud”.
  • Comp2Folder
  • Like any other ui5 application/component, we have to create a separate “Component.js, manifest.json, view and controller ” under, Comp2 folder.
  • Comp2Files
  • The below piece of code , can be written , in the new/reusable component.js file, under Comp2 folder.
  • ComponentCode
  • The new manifest.json file under “Comp2”, can be updated as per code snippet.
  • {
        "_version": "1.8.0",
        "": {
            "id": "flightcrud.comp2",
            "type": "component",
            "embeddedBy": "../",
            "i18n": "i18n/",
            "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.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/"
            "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": [
                "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:
  • Comp2Files
  • 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:



  • 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.
  • Output2
  • Please feel free, to provide your valuable suggestions, If any.


    Best Regards,


Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.