Formatting Responsive Layout in Object Page

[akshaya_p]

Hi All,

Object page is an effective way of rendering multiple sections on a single page.

But the form is always rendered in a column Layout with label above the text and this occupies a lot of vertical space.



We can change it to responsive layout and also adjust the labelspan,emptyspan,columnspan of the rendered responsive layout.

For this we should first understand how the fieldgroup annotation is rendered. It is rendered as a smart form with with multiple groups.

Ideally in a responsive layout, this transforms into different form containers.SAP guidelines say, adjusting the layout of group elements inside each group might lead to inconsistent layouts(using griddata).

Hence we should always look at adjusting the layout of the entire form

Steps

1. Add the following entry in manifest
   

   	"sap.ui.generic.app": {
   
   		"_version": "1.3.0",
   
   		"settings": {
   
   			"forceGlobalRefresh": false,
   
   			"useColumnLayoutForSmartForm ": false
   
   		},​

   
   


2. In your extension controller(which you would added for any extension in the object page)ObjectPageExt.controller.js add the following code onInit.

The object page layout has sections-subsections-blocks-control.Hence I'm accessing the smart form as below

	this.getView().getContent()[0].getSections()[0].getSubSections()[0].getBlocks()[0].getContent()[0].setLayout(new sap.ui.comp.smartform

 						.Layout({

 							columnsXL: 4,

 							columnsL: 4,

 							columnsM: 4,

 							labelSpanXL: 3,

 							labelSpanL: 3,

 							labelSpanM: 3,

 							labelSpanS: 3,

 							gridDataSpan: "XL2 L2 M2 S2",

 							emptySpanXL: 0,

 							emptySpanL: 0,

 							emptySpanM: 0,

 							emptySpanS: 0

 						}));

 					

 

If you have more than one object page, you need to register the attachpagedataloaded of the extension API and write this code in that method instead of init. here the method is onObjectPageLoaded.You could register different method for different object pages.

 			this.extensionAPI.attachPageDataLoaded(this.onObjectPageLoaded, this);

 

Here you get a more compact responsive layout of the section content.

Enjoy Coding!:)