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:

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

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.
  • 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",
        "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:
  • 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:

Output1

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

     

    Best Regards,

    Sushant

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shubham Bathla
      Shubham Bathla

      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

      Author's profile photo Sugandha Gupta
      Sugandha Gupta

      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