[ Feature Request ] [ FlexibleColumnLayout ] Need custom size for difference layout

[alex-zhang]

hi,

Thanks for the new component FlexibleColumnLayout.

But there's a little gap with requirement. (below)

To achieve this effect, i change the default layout size value.

So, Is there any possible to expose the "setLayoutsByMedia" method to change the default size value?

And below is our UX design:

[vladitasev]

Hi @alex-zhang ,

The values are per the fiori design, but we'll find some solution, even if unofficial, to support you with that requirement.

Regards,
Vladi

[alex-zhang]

hi, @vladitasev

Thanks for your quick action.

[vladitasev]

Hi @alex-zhang

1. Regarding the possibility to change the ratios - please see the PR above. It would allow usage such as:

<ui5-flexible-column-layout _smaller-column-size-two-columns="20">

which would make two-column ratios 20/80 and 80/20, rather than 33/67 and 67/33.
A similar param exists for three-column ratios, if needed.

2. Regarding changing the "TwoColumnsMidExpanded" layout to 0/100/0 - this is not necessary. There already exists a layout for this, called MidColumnFullScreen. Same for 0/0/100, and it's called EndColumnFullScreen. And of course, the default layout called OneColumn is 100/0/0. So you already have the options to show one of the columns only, when needed.

So please let us know - if we merge the above PR that would let you change ratios - point 1), and knowing that you can use the single-column layouts, described in point 2), would that let you fulfill your requirements?

Regards,
Vladi

[alex-zhang]

hi, @vladitasev

thanks for your information.

Regarding changing the TwoColumnsMidExpanded layout to 0/100/0 - this is not necessary. There already exists a layout for this, called MidColumnFullScreen. Same for 0/0/100, and it's called EndColumnFullScreen.

For this picture below it's a TwoColumnsStartExpanded layout and It's ratio in desktop and tablet is [20%, 80%, 0] MG 1
After the user click the expand button it will changed to the TwoColumnsMidExpanded layout and now it ratio in desktop and tablet is [0, 100%, 0]. IMG 2 But here we can't use the MidColumnFullScreen instead of TwoColumnsMidExpanded because the expand button is still needs here.

So , for point2, there may difference size. [20%, 80%, 0] for TwoColumnsStartExpanded and [0, 100%, 0] for TwoColumnsMidExpanded

if we use this logic

ui5-webcomponents/packages/fiori/src/fcl-utils/FCLLayout.js

Line 2 in 0035da4

const bigTwo = 100 - smallTwo; // 67% by spec

it will not achieve the target.

Otherwise, This is an other option for me On top of this PR. Here is my step:

1. I set the default layout to TwoColumnsStartExpanded and the _smaller-column-size-two-columns="20"
2. i listen to the layout-change event, if the layout is changed to TwoColumnsMidExpanded i set the _smaller-column-size-two-columns="0"

I'm not sure is that ok. And there is also different logic for phone size.

IMG 1

IMG 2

[alex-zhang]

BTW

For this code

ui5-webcomponents/packages/fiori/src/FlexibleColumnLayout.js

Lines 264 to 269 in 0035da4

	static get BREAKPOINTS() {
	return {
	"M": 960,
	"L": 1280,
	};
	}

according to fiori design https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2038570628

  S: '(max-width: 599px)',

  M: '(min-width: 600px) and (max-width: 1023px)',

  L: '(min-width: 1024px) and (max-width: 1439px)',

  XL: '(min-width: 1440px)'

So, we should follow the guide line?

[ilhan007]

Yes, the breakpoints

BTW

For this code

ui5-webcomponents/packages/fiori/src/FlexibleColumnLayout.js

Lines 264 to 269 in 0035da4

	static get BREAKPOINTS() {
	return {
	"M": 960,
	"L": 1280,
	};
	}

according to fiori design https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2038570628

  S: '(max-width: 599px)',

  M: '(min-width: 600px) and (max-width: 1023px)',

  L: '(min-width: 1024px) and (max-width: 1439px)',

  XL: '(min-width: 1440px)'

So, we should follow the guide line?

Yes, we should, change is prepared: #1984

[alex-zhang]

ok, thanks.

[alex-zhang]

hi, @vladitasev @ilhan007

how about the question above.

So , for point2, there may difference size. [20%, 80%, 0] for TwoColumnsStartExpanded and [0, 100%, 0] for TwoColumnsMidExpanded

[vladitasev]

Hi @alex-zhang

We merged the breakpoints change PR, and there is also a new PR regarding more freedom in changing layouts: #1987

Please let us know if that would work for you

Regards,
Vladi

[alex-zhang]

@vladitasev

ok, thanks. Great. It will be flexible.