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

[sushant_nath2]

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


• 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