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

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