How to implement sap.ui.table.TablePersoController

[former_member516423]

Hello everyone,

This is my very first post on SAP Community.

Recently, I need to have a column show/hide feature for a report using sap.ui.table.Table. The report is using JSON model since I need to join all data retrieving from oData services and i don't have a view either.

I've explored some options:

1. Element sap.ui.table.Table has a property showColumnVisibilityMenu which is false as default. It's good but I can't select multiple column to hide at same time. Each time, I can only choose one.


2. I have a simple way. I create a fragment with SelectDialog binding JSON model and handle hide/show by setting the property visible true/false. This meets my requirement.


3. But I want to see if SAPUI5 provides any elements like this. I find out that the smart table has the feature but it only works with oData. Finally I find this element from library sap.m: https://sapui5.hana.ondemand.com/sdk/#/sample/sap.m.sample.TablePerso/preview. However, I can't find one sample for sap.ui.table.Table. I try to do one.

First, I use the sample code from SAPUI5 website: https://sapui5.hana.ondemand.com/sdk/#/sample/sap.ui.table.sample.Basic/preview

Second, I borrow the file DemoPersoService.js from sap.m.sample.TablePerso above which will be used as Personalization Service object when initiating TablePersoController object. I replace resetPersData function  with delPersData.



Third, I add some codes in Component.js, and the controller. I remove some columns to keep the demo simple.

Component.js: DemoPersoService.js added



The controller:





Finally, the result will be like this. With element sap.ui.table.TablePersoController, we can hide/show multiple columns at same time and sort columns as well. You can check this by yourself by clicking the up/down arrow.



You can clone my git to play around with the demo.

https://github.com/equilibrium999/sap.ui.table.TablePersoController.demo.git

Thank you for your time.

[Former Member]

Excellent blog. I was looking for same thing.

 

[former_member187069]

Thanks! Helped a lot.

[MKM]

Thanks for detailed information. Any idea, how to implement this DemoPersoService.js service object using OData ?

[Troy_Li]

tri.minh.le

Hi, I found some issue here. In Columns selection dialog, all column always be selected, how to fix this issue?