How can I structure the Annotations in a Fiori List Report for multiple Object pages?

[michael_piehl]

I have a situation where I would like to leverage the functionality explained here:

https://sapui5.hana.ondemand.com/sdk/#/topic/75002b3c5ad7407dadce2f88f15f4253

My exact scenario is that depending on the line chosen in the list report, it will select an object page with different subsets/layout of the same entities. For example

* ObjectPage-01 may have sections: Header
* ObjectPage-02 may have sections: Header, Item
* ObjectPage-03 may have sections: Header, Item, Task, Additional Details
* ObjectPage-04 may have sections: Header, Task, Additional Details, Attachments

Ideally, I don't want to duplicate the same entity for each page if I don't need to, since they contain the same properties for all the pages, the layouts will change and some entities will not show up on all pages.

So I'm hoping someone can explain how do I structure the annotations to point to different object pages? do I need unique entities? unique entitysets? and how do I structure those to the specific Object Pages?

Thanks in advance,

Mike

[nicolas_lunet · Accepted solution]

Hello Mike,

As the main structural entities for object pages are on the EntityType (@UI.Facets), you can do this in two ways.

Either like Jun Wu mentioned by using Field Controls and UI.Hidden to decided what is shown / hidden.

Or by having different EntityTypes + EntitySets for each of your variant.

Usually this kind of different visualisation in the OP can either mean your object has different states (in which case the UI.Hidden approach makes sense), or that you have different objects you are representing (and in that case having different EntityType makes sense)

Regards

Nicolas

[michael_piehl · Accepted solution]

Perhaps I misunderstood, but I attempted to create multiple UI.Facets with unique qualifiers. Can I link those to different pages? Each Facet can contain the sections in any order (or not at all), and can contain any subset of fields within that sections in any sequence. I'm not sure if you are saying that unique Facets can be used to represent each page layout, in which case how do I link those to a specific page, or if you are saying in my instance I would need unique entitysets, and the question would still be the same, how do I link that to a particular page. Any guidance would be greatly appreciated.

Thanks,

Mike

[nicolas_lunet · Accepted solution]

Hi Mike,

You are not wrong in theory but that is not currently supported in fiori elements to specify different qualifier for the object page.

Regardless of that we would still need to consider different object page and navigate to different page depending on the different objects. This is something that you can do with an extension on the list report table and navigation to create the proper context for navigation to different object pages.

You can see an example of something similar here https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/controllerExtens... where we have different flows after the item is selected. In the end you can configure which route to navigate to per item and could end up on different object pages

[michael_piehl · Accepted solution]

This is great. I had been looking for an example where this was implemented. Thank you Nicolas.

Finally, if using UI.Facet with different qualifiers won't work, Is there a way, using annotations, to define the layout of the different object pages?

[michael_piehl · Accepted solution]

I'm struggling to get the extension working. I'm using V2 services, and I'm using VS Code to build the application.

in my file /ext/controller/ListReportExt.controller.js

sap.ui.define(

[

"sap/ui/core/mvc/ControllerExtension"

],

function (ControllerExtension) {

"use strict";

return ControllerExtension.extend("rennotexec.ext.controller.ListReportExt", {

// this section allows to extend lifecycle hooks or override public methods of the base controller

onListNavigationExtension: function (oEvent) {

var oNavigationController = this.extensionAPI.getNavigationController();

var oBindingContext = oEvent.getSource().getBindingContext();

var oObject = oBindingContext.getObject();

var rntyp = "00";

rntyp = oBindingContext.getProperty("Rntyp");

// for notebooks we trigger external navigation for all others we use internal navigation

switch (rntyp) {

case "00":

return false;

case "01":

oNavigationController.navigateExternal("Output_01");

return true;

case "02":

oNavigationController.navigateExternal("Output_02");

return true;

}

// if (oObject.Property == "PropertyValue") {

// oNavigationController.navigateExternal("NavigationID");

// } else {

// // return false to trigger the default internal navigation

// return false;

// }

// // return true is necessary to prevent further default navigation

// return true;

// },

})

}

);

But receive the warning: [{

"resource": "/d:/UI5/RenNotExec/webapp/ext/controller/ListReportExt.controller.js",

"owner": "javascript",

"code": "UI5Plugin",

"severity": 4,

"message": "\"extensionAPI\" does not exist in \"rennotexec.ext.controller.ListReportExt\"",

"source": "WrongFieldMethodLinter",

"startLineNumber": 10,

"startColumn": 50,

"endLineNumber": 10,

"endColumn": 62

}]

in my manifest.json:

I added the following:

{

"_version": "1.17.0",

"sap.app": {

"id": "rennotexec",

"type": "application",

"i18n": "i18n/i18n.properties",

"applicationVersion": {

"version": "0.0.1"

},

"title": "{{appTitle}}",

"description": "{{appDescription}}",

"resources": "resources.json",

"sourceTemplate": {

"id": "@sap/generator-fiori:lrop",

"version": "1.9.2",

"toolsId": "5f65dc12-a9b5-4152-b9d8-da0d6ffea17a"

},

"dataSources": {

"mainService": {

"uri": "/sap/opu/odata/jvs/REN_NOTEXEC_SRV/",

"type": "OData",

"settings": {

"annotations": [

"annotation"

],

"localUri": "localService/metadata.xml",

"odataVersion": "2.0"

}

},

"annotation": {

"type": "ODataAnnotation",

"uri": "annotations/annotation.xml",

"settings": {

"localUri": "annotations/annotation.xml"

}

}

}

},

"sap.ui": {

"technology": "UI5",

"icons": {

"icon": "",

"favIcon": "",

"phone": "",

"phone@2": "",

"tablet": "",

"tablet@2": ""

},

"deviceTypes": {

"desktop": true,

"tablet": true,

"phone": true

}

},

"sap.ui5": {

"flexEnabled": true,

"dependencies": {

"minUI5Version": "1.71.53",

"libs": {

"sap.m": {},

"sap.ui.core": {},

"sap.ushell": {},

"sap.f": {},

"sap.ui.comp": {},

"sap.ui.generic.app": {},

"sap.suite.ui.generic.template": {}

}

},

"contentDensities": {

"compact": true,

"cozy": true

},

"extends": {

"extensions": {

"sap.ui.controllerExtensions": {

"sap.suite.ui.generic.template.ListReport.view.ListReport": {

"controllerName": "rennotexec.ext.controller.ListReportExt"

}

}

}

},

"models": {

"i18n": {

"type": "sap.ui.model.resource.ResourceModel",

"settings": {

"bundleName": "rennotexec.i18n.i18n"

}

},

"": {

"dataSource": "mainService",

"preload": true,

"settings": {

"defaultBindingMode": "TwoWay",

"defaultCountMode": "Inline",

"refreshAfterChange": false

}

},

"@i18n": {

"type": "sap.ui.model.resource.ResourceModel",

"uri": "i18n/i18n.properties"

}

},

"resources": {

"css": []

},

"routing": {

"config": {},

"routes": [],

"targets": {}

}

},

"sap.ui.generic.app": {

"_version": "1.3.0",

"settings": {

"forceGlobalRefresh": false,

"objectPageHeaderType": "Dynamic",

"considerAnalyticalParameters": true,

"showDraftToggle": false

},

"pages": {

"ListReport|Output": {

"entitySet": "Output",

"component": {

"name": "sap.suite.ui.generic.template.ListReport",

"list": true,

"settings": {

"condensedTableLayout": true,

"smartVariantManagement": true,

"enableTableFilterInPageVariant": true,

"filterSettings": {

"dateSettings": {

"useDateRange": true

}

},

"tableSettings": {

"multiSelect": true,

"selectAll": true

}

}

},

"pages": {

"ObjectPage|Output": {

"entitySet": "Output",

"defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen",

"component": {

"name": "sap.suite.ui.generic.template.ObjectPage"

}

},

"ObjectPage|Output_01": {

"entitySet": "Output",

"defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen",

"component": {

"name": "sap.suite.ui.generic.template.ObjectPage"

}

}

}

}

}

},

"sap.fiori": {

"registrationIds": [],

"archeType": "transactional"

}

}

what I'm wondering is do I need to setup navigation? routes? targets? all of the above?

[nicolas_lunet · Accepted solution]

I'm very sorry, my assumption was that you were using FEv4.

In FEv2 i don't think you can configure and maintain the routes, and i'm not sure that what you are trying to do is possible at all, but a v2 expert should confirm 😕

[michael_piehl · Accepted solution]

Thanks for your help Nicolas,

I was able to make it work. It took multiple steps, so I'm going to document it here in case anyone else needs to do this as well.

1. I needed to create 1 new entity/entityset for each page. I didn't need to replicate all the fields, only the fields that I planned to show in the header to avoid issues with my metadata/annotations file.

2. I created associations between my new entity and each of the existing sections that may that might show up.

3. I created navigation between the associations for each of the new entities. (part 1-3 are tedious, but generally a 1 time setup).

4. I created the annotations between these new entity/sets to show the different sections to be shown, and the header information to be displayed for each. I used a unique qualifier for each page/section to ensure they could be treated individually, but still reference the generic entities within each section.

5. I created webapp\ext\controller\ListReportExt.controller.js

Now, I scoured the web and tried many different variations, but this is the one that finally worked for me. within this file, I added the following piece of code:

sap.ui.define([

"sap/suite/ui/generic/template/extensionAPI/extensionAPI"

], function (extensionAPI) {

"use strict";

return sap.ui.controller("rennotexec.ext.controller.ListReportExt", {

onListNavigationExtension: function (oEvent) {

let navigationProperty;

var oExtensionAPI = this.extensionAPI;

var oNavigationController = oExtensionAPI.getNavigationController();

var oItem = oEvent.getSource();

var oBindingContext = oItem.getBindingContext();

let model = oBindingContext.getModel();

var oObject = oBindingContext.getObject();

switch (oObject.Rntyp) {

case "01":

navigationProperty = "Output_01";

break;

case "02":

navigationProperty = "Output_02";

break;

case "03":

navigationProperty = "Output_03";

break;

case "04":

navigationProperty = "Output_04";

break;

case "05":

navigationProperty = "Output_05";

break;

}

if (navigationProperty) {

var sPathOld = oBindingContext.sPath;

var sPath = sPathOld.replace("Output", navigationProperty);

var context = new sap.ui.model.Context(oBindingContext.getModel(), sPath);

oNavigationController.navigateInternal(context);

return true;

}

return false;

}

})

});

6. Finally, I updated the Manifest.json to include the controller extension, as well as the new pages. "sap.ui5": { "flexEnabled": true, "dependencies": { "minUI5Version": "1.71.53",... },
"extends": { "extensions": { "sap.ui.controllerExtensions": { "sap.suite.ui.generic.template.ListReport.view.ListReport": { "controllerName": "rennotexec.ext.controller.ListReportExt" } } }... "pages": { "ListReport|Output": { "entitySet": "Output", "component": { "name": "sap.suite.ui.generic.template.ListReport", "list": true, "settings": { "condensedTableLayout": true, "smartVariantManagement": true, "enableTableFilterInPageVariant": true, "filterSettings": { "dateSettings": { "useDateRange": true } }, "tableSettings": { "multiSelect": true, "selectAll": true } } }, "pages": { "ObjectPage|Output": { "entitySet": "Output", "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen", "component": { "name": "sap.suite.ui.generic.template.ObjectPage" } }, "ObjectPage|Output_01": { "entitySet": "Output_01", "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen", "component": { "name": "sap.suite.ui.generic.template.ObjectPage" } }, "ObjectPage|Output_02": { "entitySet": "Output_02", "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen", "component": { "name": "sap.suite.ui.generic.template.ObjectPage" } },...if anyone out there is trying this and needs further clarification on what I did, please reach out. After struggling with this for a couple weeks, I'd be happy to help.Thanks,Piehl