Search code examples
sapui5

How to change layout of sap.uxap.ObjectPage Blocks

Demo

I have 2 + 5 blocks here, in small screen, each panel in blocks are in full width.

enter image description here

But in large screen, blocks are in 3:3:3 or 6:3. I want them all in a single row.

enter image description here

each section is contained in <div class="sapUiRespGridSpanL4 sapUiRespGridSpanM6 sapUiRespGridSpanS12 sapUiRespGridSpanXL3">

How to change it to class="sapUiRespGridSpanL12 sapUiRespGridSpanM12 sapUiRespGridSpanS12 sapUiRespGridSpanXL12" ?

I've tried to add layout in Panel, but not working.

Refrence:

sap.uxap.ObjectPageLayout Documentation

layout of blocks, blocks are in the same color, hard to specify

Solution

  • Finally after 1.5 hours figured out

    Reason: Blocks will have to be extended from BlockBase to apply columnLayout.

    Extending the BlockBase:

    sap.ui.define(["sap/uxap/BlockBase"], function (BlockBase) {
    "use strict";

    var BlockPanel = BlockBase.extend("sap.uxap.sample.ObjectPageSubSectionSized.blocks.BlockPanel", {
        metadata: {
            /* no additional views provided */
        }
    });
    return BlockPanel;
});

    Then create a view and controller using the above new ui5 extended control. Use that in your page with columnLayout

    xmlns:sample="sap.uxap.sample.ObjectPageSubSectionSized.blocks"
...
...
<uxap:blocks>
   <sample:BlockPanel columnLayout="4"/>        
</uxap:blocks>

    columnLayout can't be applied if you don't extend block base. (which is really pathetic design). Nevertheless, values range from 1-4 and "auto".

    Created working plnkr here

    How to build custom SAPUI control?