Can we add fragments in place of blocks in Object page layout?

[VenkyM]

Hi all,

I am using blocks in object page layout in one of my ui5 application. Now I want to add fragments dynamically instead of blocks in Object page layout.

I do not find any events for ObjectPageSubSection?

Is it possible to do this?Any help will be appreciated.

[VenkyM]

Hi Viplove,

Thanks for the reply.

If so, How to proceed ? Any sample please.

I need to add fragments dynamically when user clicks on the ObjectPageSubSection titles as shown in above image.

I found that there are no events for ObjectPageSubSection. Please help me.

[former_member340030]

Hi Venkatesh ,

I think you should know what exactly object page layout with sections and subsections are used for. They are not like buttons to change the content of a section. For each subsections you need to provide same fragment not dynamically and attach or bind the model (data) before hand only when page loads and it will navigate to corresponding subsection according to your selection.

If you dont want like this than try to use another control which best suits your requirement but using this you can't catch the subsection selection event, this control is not made for that

thanks

Viplove

[VenkyM]

Hi Viplove,

Thanks for the response.

I understood the use of Object Page Layout.

But my requirement is the one which I explained above.

Can I extend the ObjectPageSubSection and add event to that? Or else Is there any other control available resembles Object Page ?

[former_member340030]

Hi Venkatesh ,

Actually you can extend and add an event, but its not much prefer to extend the standard controls until n unless its utter necessary. If you exactly want this control than you can extend but if its ok to use other controls than just try to use standard ones .. For my point of view you can use icon tab bar - text only and in the education tab content area you can use sap.m.select where you can choose different education type and accordingly change the content (or you can say fragment) .

thanks

Viplove

[VenkyM]

Hi Viplove,

Thanks for the quick response.

That means I can extend container (not control) ObjectPageSubSection in ui5 and add event to that, right?

[former_member340030]

Hi Venkatesh ,

Yeah you need to extend ObjectPageSubsection class to add the event , but just think if you can any other control , if not than go ahead and extend

thanks

Viplove

[VenkyM]

Hi Viplove,

I have extended the container Object Page Sub Section as below,

Home.view.xml

……………………

…………………….

<ObjectPageSection id="educationSection" title="Education" importance="Low">

<subSections>

<osswe:ObjectPageSubSectionWithEvent title="Sub 1" press="onSub1">

<blocks>

<formblock:PersonalBlock id="idRegBlock1" columnLayout="1"/>

</blocks>

</osswe:ObjectPageSubSectionWithEvent>

<ObjectPageSubSection id="personalSectionSS2" title="Sub 2">

<moreBlocks>

<formblock:PersonalBlock id="idRegBlock2"/>

<formblock:PersonalBlock id="idRegBlock3"/>

</moreBlocks>

</ObjectPageSubSection>

</subSections>

</ObjectPageSection>

…………………..

……………………….

ObjectPageSubSecitonWithEvent.js(extended control)

sap.ui.define(["sap/ui/core/Control"], function(Control) {

"use strict";

return Control.extend("com.testObjectPage.control.ObjectPageSubSecitonWithEvent", {

metadata: {

properties: {},

aggregations: {},

events: {

"press": {}

}

},

init: function() {},

onclick: function(evt) {

this.firePress();

},

renderer: function(oRm, oControl) {

oRm.write('<li');

oRm.writeControlData(oControl);

oRm.write(">");

oRm.write('</li>');

}

});

});

Home.controller.js

jQuery.sap.declare("control.ObjectPageSubSecitonWithEvent");

sap.ui.define([

"sap/ui/core/mvc/Controller"

], function(Controller) {

"use strict";

return Controller.extend("com.testObjectPage.controller.Home", {

onPress:function(){

sap.m.MessageToast.show("sMessage");

}

});

});

Project Structure:

Output:

Error:

Can't find object class 'com.testObjectPage.control.ObjectPageSubSectionWithEvent' for XML-view - XMLTemplateProcessor.js

Please help me where I am getting error.

[former_member340030]

Hi ,

Actually there is mistake in the name of the extended control it should Section:

return Control.extend("com.testObjectPage.control.ObjectPageSubSecitonWithEvent", {

thanks

Viplove

[VenkyM]

Thank you very much Viplove.

It got resolved.

I got another error:

Uncaught error: Cannot add direct child without default aggregation defined for control .... ObjectPageSubSectionWithEvent .

[former_member340030]

Actually there is nothing in aggregation in the extended control , as you are extending the Control Class not the ObjectPageSubSection Class which means you are creating the custom control but you need to extend an existing control with a press event .

check this link for that .

thanks

Viplove

[VenkyM]

Now I have changed from Control class to ObjectPageSubSection class.

But another error related to blocks aggregation.

Failed to load "sap/uxap/block.js" from resources/.....

[VenkyM]

Above error got resolved but event is not getting fired.

[former_member340030]

Can you show me your final code for extended control ?

thanks

Viplove

[VenkyM]

Hi Viplove,

Below is the final code..

Event is firing but in wrong place.

Actually event has to fired when user selects the drop down like item .i.e. ObjectPageSubSection title as shown below,

But it is being fired when user clicks on the subsection part as shown below.

Complete code:

ObjectPageSubSectionWithEvent.js

sap.ui.define(["sap/ui/core/Control", "sap/uxap/ObjectPageSubSection"], function(Control, ObjectPageSubSection) {

"use strict";

return ObjectPageSubSection.extend("com.testObjectPage.control.ObjectPageSubSectionWithEvent", {

metadata: {

events: {

"press": {}

}

},

onclick: function(evt) {

this.firePress();

},

renderer:{}

});

});

Home.view.xml

<ObjectPageSection id="educationSection" title="Education" importance="Low">

<subSections>

<osswe:ObjectPageSubSectionWithEvent title="Extended Sub 1" press="onSub1">

<osswe:blocks>

<formblock:PersonalBlock id="idRegBlock1" columnLayout="1"/>

</osswe:blocks>

</osswe:ObjectPageSubSectionWithEvent>

<ObjectPageSubSection id="personalSectionSS2" title="Sub 2">

<moreBlocks>

<formblock:PersonalBlock id="idRegBlock2"/>

<formblock:PersonalBlock id="idRegBlock3"/>

</moreBlocks>

</ObjectPageSubSection>

</subSections>

</ObjectPageSection>

Home.controller.js

jQuery.sap.declare("control.ObjectPageSubSectionWithEvent");

sap.ui.define([

"sap/ui/core/mvc/Controller"

], function(Controller) {

"use strict";

return Controller.extend("com.testObjectPage.controller.Home", {

onSub1:function(){

//debugger;

sap.m.MessageToast.show("sMessage");

}

});

});

thanks.

[former_member340030]

Can you try extending objectPageSection and in that it will be select event with a key similar to sap.m.select.

Its better you should try any standard control ..

thanks

Viplove

[VenkyM]

Hi Viplove,

Instead of extending ,I tried with new approach by using browser events as below,

Home.controller.js

onAfterRendering: function() {
this.getView().byId("__xmlview0--idObjectPageLayout-anchBar-__xmlview0--personalSectionSS1-anchor").attachBrowserEvent("click",function(oEvent) {
sap.m.MessageToast.show("sMessage"); // it is working as expected
//But this below fragment is not rendering properly.
var oPageSubSection = this.getView().byId("personalSectionSS1");
var oFragment = sap.ui.xmlfragment("com.webileapps.testtestObjectPage.fragments.PersonalBlock");
oPageSubSection.addBlock(oFragment);
}, this);
		}<br>

Home.view.xml

<ObjectPageSection id="educationSection" title="Education" importance="Low">
<subSections>
<ObjectPageSubSection id="personalSectionSS1" title="Sub 1">
<blocks>
 <formblock:PersonalBlock id="idRegBlock1" columnLayout="1" />
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection><br>

But the problem is with rendering, when I click on the the ObjectPageSubSection title "Sub1" the fragment is adding as expected but in second click.

How can I rerender this?

thanks

[former_member340030]

Can you check on the first click any error is coming in the console

thanks

Viplove

[VenkyM]

Hi Viplove,

No error is seen in console except 404 as below,

thanks,