How to dynamically hide a column in a table inside a FE Object Page using RAP and OData v4?

[Andreas_M]

Dear community,

I couldn't find any solution to hide a column dynamically in a table inside an Fiori Elements Object Page with RAP and OData v4.

One solution I tried was to add a custom column in the manifest und to use expression binding, but that's not working.

 "controlConfiguration": { 
   "_Mean/@com.sap.vocabularies.UI.v1.LineItem":
   { "columns":
     { "CustomColumnOnObjectPage":
      { "header": "CustomColumn",
        "template": "...",
        "availability": "{= ${CustomType} === '2' ? 'Hidden' : 'Adaption' }",
        "width": "10em" 
      }
    }
  }
} 
  

Hiding fields in the object page is working with SADL and Virtual Elements but for columns in a table I didn't find a way.

I hope anyone know how to solve this without any big workarounds.

Thanks for your help.

Best regards

Andreas

[Marian_Zeis]

Seems like you need to extend the controller.

I used this example

https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/controllerExtensions/basicExt...

Some rough code could look like this:

onAfterRendering () {
				    console.log("test")
				    this.getView().byId("sap.fe.core.fpmExplorer::Default--fe::table::_Child::LineItem-innerTable").getModel().attachDataReceived(function(event){
				        console.log("reveived")
				        debugger;
				        const id = event.getSource().getBoundContext().getObject().ID
				        if(id === 1){
				            this.getView().byId("sap.fe.core.fpmExplorer::Default--fe::table::_Child::LineItem-innerTable").removeColumn(1)
				        }
				        debugger;
				    })
				},

[former_member849847]

Hello 20eed143c19f4b82bc4cf049916102cb

This answer solved my issue.I was missing "-innerTable". Thank you.

However, in my case inner table is not available in onAfterRendering, lineitem though is available.

	onAfterRendering: function () {
                var oTable = sap.ui.getCore().byId("claims::CLAIMS_V1ObjectPage--fe::table::_ITEM_V1::LineItem");
                //inner table should be available in a bit
				var intervalId = setInterval(function () {
					console.log('Custom onAfterRendering function', new Date());
                    var oInnerTable = sap.ui.getCore().byId("claims::CLAIMS_V1ObjectPage--fe::table::_ITEM_V1::LineItem-innerTable");
                    if (oInnerTable) {
					
						oInnerTable.setAlternateRowColors(true);
                        oInnerTable.setEnableColumnFreeze(true);
                        clearInterval(intervalId);
                    }
                }, 250);
            }

Console prints at least three times before inner table is available. OData v4 service

[former_member849847]

better results with even delegate. Thanks again.

		onAfterRendering: function () {
				var oTable = sap.ui.getCore().byId("claims::CLAIMS_V1ObjectPage--fe::table::_ITEM_V1::LineItem");				
				oTable.addEventDelegate({
					onAfterRendering: function () {
						var oInnerTable = sap.ui.getCore().byId("claims::CLAIMS_V1ObjectPage--fe::table::_ITEM_V1::LineItem-innerTable");
						if (oInnerTable) {
							console.log('Custom onAfterRendering function', new Date());
							oInnerTable.setAlternateRowColors(true);
							oInnerTable.setEnableColumnFreeze(true);
						}
					}
				});
			}

[Marian_Zeis]

Happy to help. You can accept the answer if this was the best solution.

Thanks!

[former_member849847]

Thanks Marian, this was not my question, would you be able to drop a comment in mine and I can close it? Not sure if there is a better way. to link the questions.

[Marian_Zeis]

You´re right, did not check that

[JessieCheah]

Since you are using RAP, are you also using annotation @UI.lineItem for the columns? If yes, you can use @UI.lineItem.hidden and also virtual element to hide the column

[Andreas_M]

Thanks for your answer. I'm using your suggestion. In my consumption view I define the virtual element:

@ObjectModel.virtualElement: true
@ObjectModel.virtualElementCalculatedBy: 'ABAP:ZCL_FIELD_CONTROL'
virtual MeinhHide : abap_boolean,

In my metadata extension I define the lineItem.hidden:

@UI: {  lineItem:       [ { position: 20, hidden: #(MeinhHide) } ],
        identification: [ { position: 20 } ] }
Meinh;

If I'm doing it statically with hidden: true instead of the virtual element it's working.

What I found in the documentation from the answer above slightly decreases my hope that there is a standard way:

"For a path based value for UI.Hidden, even if the path evaluates to true for all the rows, only the field is hidden and not the entire table column."

So it seems not possible but maybe I'm doing something wrong. I can't imagine that SAP Apps won't have the same problem as this sounds like some fundamental thing?

Hope you have further ideas.

Thanks

Andreas

[JessieCheah]

Hi Andreas, I just gave it a try and unfortunately your assumption is correct. In oData V2 the feature of hiding the whole column is supported, but not in V4 😞

[Andreas_M]

Are there any other possibilities? I'm also interested in the design decision and if it will change in the future?

[former_member849847]

Hello,

Would you have checked this? https://sapui5.hana.ondemand.com/sdk/#/topic/ca00ee45fe344a73998f482cb2e669bb

pairing with virtual elements would also help.

if not an object page controller extension would work,

instead of removing all columns in below code, you can remove individual by a fetch on columns from otable.

oTable.getColumns().

loop these columns and do a remove based on your condition.

[Andreas_M]

Thanks for your answer. In the answer below I gave a more detailed explanation what I tried with virtual elements. I found in your linked documentation that it seems not to be working for OData v4. But I still hope that there will be a more standard way than your solution and still open to other suggestions. Does your solution also works with personalisation dialog. So that the user cant select it there?

Thanks

Andreas