Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
sushant_nath2
Participant
2,462
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

5 Comments
Labels in this area