Question Re: Flexible Column Layout while using Multiple Views in List Report in Technology Q&A

Flexible Column Layout while using Multiple Views in List Report

former_member8427 — Thu, 01 Jul 2021 09:12:18 GMT

Hi experts,

I'm currently having some issues using the Flexible Column Layout in my List Report. The List report consists of three different (but very similar) entity sets in accordance with the documentation here.

In the manifest I have configured it as

"config": {
    "flexibleColumnLayout": {
        "defaultTwoColumnLayoutType": "TwoColumnsBeginExpanded",
        "defaultThreeColumnLayoutType": "ThreeColumnsMidExpanded"
    },
    "routerClass": "sap.f.routing.Router"
}

However, this only seems to work correctly for one of the tables. On one table tab, I get the expected result:

But on the other tabs, when I click:

It opens the Object page in fullscreen mode:

Any ideas as to what may be causing this would be much appreciated!

Best Regards,

Jibbril

Re: Flexible Column Layout while using Multiple Views in List Report

nicolas_lunet — Thu, 01 Jul 2021 09:15:35 GMT

Hello Jibbril,

How the FlexibleColumnLayout display your information depends on how the route were configured in your manifest.

Could you share how you defined the different targets / views for this ?

Thanks !

Re: Flexible Column Layout while using Multiple Views in List Report

former_member8427 — Thu, 01 Jul 2021 09:42:00 GMT

Hello Nicolas,

Absolutely, here is the routing node from the manifest:

"routing": {
            "routes": [
                {
                    "pattern": ":?query:",
                    "name": "SubtaskList",
                    "target": [
                        "SubtaskList"
                    ]
                },
                {
                    "pattern": "Subtask({key}):?query:",
                    "name": "SubtaskObjectPage",
                    "target": [
                        "SubtaskList",
                        "SubtaskObjectPage"
                    ]
                },
                {
                    "pattern": "MySubtasks({key}):?query:",
                    "name": "MySubtasksObjectPage",
                    "target": "SubtaskObjectPage"
                },
                {
                    "pattern": "TeamSubtasks({key}):?query:",
                    "name": "TeamSubtasksObjectPage",
                    "target": "SubtaskObjectPage"
                },
                {
                    "pattern": "Subtask({key})/ChecklistItems({key2}):?query:",
                    "name": "ChecklistItemsCustomPage",
                    "target": [
                        "SubtaskList",
                        "SubtaskObjectPage",
                        "ChecklistItemsCustomPage"
                    ]
                }
            ],
            "targets": {
                "SubtaskList": {
                    "type": "Component",
                    "id": "SubtaskList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "entitySet": "Subtask",
                            "initialLoad": "Enabled",
                            "variantManagement": "Page",
                            "navigation": {
                                "Subtask": {
                                    "detail": {
                                        "route": "SubtaskObjectPage"
                                    }
                                },
                                "MySubtasks": {
                                    "detail": {
                                        "route": "MySubtasksObjectPage"
                                    }
                                },
                                "TeamSubtasks": {
                                    "detail": {
                                        "route": "TeamSubtasksObjectPage"
                                    }
                                }   
                            },
                            "views": {
                                "paths": [
                                    {
                                        "key": "tab1",
                                        "entitySet": "MySubtasks",
                                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#MySubtasks"
                                    },
                                    {
                                        "key": "tab2",
                                        "entitySet": "TeamSubtasks",
                                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#TeamSubtasks"
                                    },
                                    {
                                        "key": "tab3",
                                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#AllSubtasks"
                                    }
                                ],
                                "hideTableTitle": false,
                                "showCounts": false
                            },
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.LineItem": {
                                    "columns": {
                                        "CustomColumnRating": {
                                            "header": "{i18n>Milestones}",
                                            "horizontalAlign": "Center",
                                            "template": "tasklist.ext.fragment.MicroProcessFlowColumn",
                                            "availability": "Default",
                                            "properties": [
                                                "Name"
                                            ]
                                        }
                                    }
                                }
                            }
                        }
                    },
                    "controlAggregation": "beginColumnPages",
                    "contextPattern": ""
                },
                "SubtaskObjectPage": {
                    "type": "Component",
                    "id": "SubtaskObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "editableHeaderContent": false,
                            "entitySet": "Subtask",
                            "sectionLayout": "Tabs",
                            "navigation": {
                                "ChecklistItems": {
                                    "detail": {
                                        "route": "ChecklistItemsCustomPage"
                                    }
                                }
                            },
                            "content": {
                                "body": {
                                    "sections": {
                                        "ProcessFlowSection": {
                                            "name": "tasklist.ext.fragment.CustomProcessFlow",
                                            "position": {
                                                "anchor": "SubtaskParentCollection",
                                                "placement": "After"
                                            },
                                            "type": "XMLFragment",
                                            "title": "Process Flow"
                                        }
                                    }
                                }
                            }
                        }
                    },
                    "controlAggregation": "midColumnPages",
                    "contextPattern": "/Subtask({key})"
                },
                "ChecklistItemsCustomPage": {
                    "viewId": "ChecklistItemsView",
                    "viewName": "tasklist.ext.view.ChecklistItems",
                    "options": {
                        "settings": {
                            "entitySet": "ChecklistItemView",
                            "navigation": {}
                        }
                    },
                    "controlAggregation": "endColumnPages",
                    "contextPattern": "/Subtask({key})/ChecklistItems({key2})"
                },
                "SubtaskCustomPage": {
                    "viewId": "SubtaskCustomView",
                    "viewName": "tasklist.ext.view.CustomSubtask",
                    "options": {
                        "settings": {
                            "entitySet": "Subtask",
                            "navigation": {}
                        }
                    },
                    "controlAggregation": "midColumnPages",
                    "contextPattern": "/Subtask({key})"
                }
            },
            "config": {
                "flexibleColumnLayout": {
                    "defaultTwoColumnLayoutType": "TwoColumnsMidExpanded",
                    "defaultThreeColumnLayoutType": "ThreeColumnsMidExpanded"
                },
                "routerClass": "sap.f.routing.Router"
            }
        },

Thanks for the help!

Re: Flexible Column Layout while using Multiple Views in List Report

nicolas_lunet — Thu, 01 Jul 2021 09:53:56 GMT

Ok, for both the first and second tab you now defined the following targets

"target": "SubtaskObjectPage"

"target": "SubtaskObjectPage"

Which means only this page will be displayed so only one column in full screen.

If you want more you have to define an array with all the view that should be included.

Furthermore this "subtaskObjectPage" is configured to display the SubTask entityset and not the other two, if you want navigation and everything to work properly you need dedicated objectpage for the other kind of entityset.

Re: Flexible Column Layout while using Multiple Views in List Report

former_member8427 — Thu, 01 Jul 2021 12:37:17 GMT

That fixed it, thanks a lot!