How to implement sap.ui.table.TablePersoController
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:
- 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.
- 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.
- 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
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.
Thank you for your time.