Web IDE generated list report application object page's edit event

[Former Member]

Hi experts,

I have a fiori list report application generated via web ide using the cds bopf approach. I would like to know if there is a way to tap into the edit event of the object page details view. I tried quite a number of approach by extending the object page controller but it did not trigger the event.

above is the sample screen of the application. This is the view after selecting an entry from the main list view.

My question is, if there is a way to tap this edit event to insert some customized functionality to it.

All advice is appreciated.

Thank you.

Best regards,

Amanda

[Former Member]

Hi Pratheek,

Actually i need to resize a field width upon edit for now. But in future i might add a custom facet with a rich text editor where i need to control its editable state when edit is clicked.

[Former Member]

Hi Pratheek,

Actually i need to resize a field width upon edit for now. But in future i might add a custom facet with a rich text editor where i need to control its editable state when edit is clicked.

[pratheek_kv2]

Hi Amanda,

This can be achieved y multiple approaches.

1 - The easiest one. Add @UI.multiLineText: true to the field in your consumption view.

2 - Use the event "PageDataLoaded" of List Report extension controller.

Create an Extension Controller for the object page.

Add "onInit" method and add the below code.

this.extensionAPI.attachPageDataLoaded(function () {

//Your code goes here.

});

The function would now be called on every refresh of the Page which also includes Switching from Edit->Display or Display->Edit.

Now, List Report has a Model named "ui". This model has a property "editable".

Use this property to identify the current state of the page.

If it is editable, Get the reference of the field that you want to switch using

var field = sap.ui.getCore().byId("Field ID")

var fieldgroup = field.getparent().

Once you get the field group, Hide the field and create Rich text Editor and add it to the field Group. This should do it.

a Side note, Rich text editor converts the text into HTML. There would be length issues if you use rich text.

For example, If the Table field is of length 5, and In the rich text I enter "abcde". You can see that "b" is BOLD in this.

so, the backend would receive the value as "a<b>b</b>cde" and this exceeds the length and would cause issues in BOPF if you have Draft enabled BOPF( maybe for Non Draft as well ). But maybe you already have a solution. 🙂

Regards,

Pratheek

[Former Member]

I tried the code that you mentioned above :

this.extensionAPI.attachPageDataLoaded(function () {
//Your code goes here.
});

Is there a way to debug this upon on edit click? It goes in during init but on click it did not trigger the breakpoint.

Thank you.

[pratheek_kv2]

Try the below code. Keep the console Open when you press edit. It should stop.

this.extensionAPI.attachPageDataLoaded(function () {
debugger;
});

[Former Member]

Somehow it only breaks on init method. Below is how i coded in the init function of the object page controller extension:

onInit: function() {
	this.extensionAPI.attachPageDataLoaded(function (){
		debugger;
	});
}

I notice however, when i click on edit it triggers the RenderManager. Not sure if it is something I can tap on for what I am trying to achive.

[pratheek_kv2]

Hi Amanda,

This is the recommended "hook" to code such functionality.

You can try other approaches but I'm not aware of any other places to write this.

You should check why the function is not triggered on delete. I just now checked it one of my UI projects and seems to work.

Regards,

Pratheek

[pratheek_kv2]

Hello Amanda,

Can you please explain a bit more about what you want?

If what you want is some UI related stuff, like bringing a Pop Up on edit, this might be a bit of an effort.

If its something like initializing a field on edit, that's easily possible with determinations.

Regards,

Pratheek

[Former Member]

Hi Pratheek,

Actually i need to resize a field width upon edit for now. But in future i might add a custom facet with a rich text editor where i need to control its editable state when edit is clicked.