[SF] [Form] More flexible layout customization

[2bno1]

Is your feature request related to a problem?

Currently, there're 2 limitation of the form layout so it not satisfy SuccessFactor's design requirement.

1. No way to configure the vertical label layout
2. No way to configure the span of a form group

Look at the design below.

1. All the labels in form are at the top of the input
2. Group 1 which contains much more fields, occupies 2/3 columns of the whole form.

From the current API of Form/FormGroup, I don't find a way to achieve this design.

Describe the solution you'd like

Form/Form Group provides API to configure

1. Label layout (horizontal or vertical)
2. Spans of each Form Group

Describe alternatives you've considered

No response

Additional Context

No response

Declaration

• [ ] I’m not disclosing any internal or sensitive information.

[2bno1]

What's the plan for this feature request? As this feature is required for SF's design pattern, it would be better if it can be put at higher priority. Thanks.

[Lukas742]

Hi @2bno1

For this feature, we will most likely need to rework the entire form component. So at the moment we can't give you an estimate when we will be done with it, but unfortunately I don't think we can implement it this quarter.

[2bno1]

Just FYI that SAP UI5 has supported both of these 2 features. Here's the demo: https://github.com/SAP/ui5-webcomponents-react/assets/1751846/ef94aafe-6d50-4877-8ad3-47eabf31e919 And here's the link of the sample: https://ui5.sap.com/#/entity/sap.ui.layout.form.Form/sample/sap.ui.layout.sample.Form_Column_threeGroups234

[ilhan007]

Hi @2bno1 I noticed that the Link of the Switch, is not on Top, but on the side, is that on purpose. All other labels are placed on top?

[rvsia]

+1

At Signavio, we also need to support different spanning of Form Groups

https://openui5.slack.com/archives/CSQEJ2J04/p1706607970091189

[2bno1]

Hi @2bno1 I noticed that the Link of the Switch, is not on Top, but on the side, is that on purpose. All other labels are placed on top?

@ilhan007 Thanks for pointing this out. I need to confirm this with my UX.

[2bno1]

@ilhan007 I've checked with my UX, the label of Switch should also be on top. Thanks.

[Lukas742]

Hello everyone,

since our Form implementation will be replaced with the ui5 web components Form, we unfortunately won't add additional features to our Form. You can already check out the new Form in our next/v2 documentation (wip) or in the documentation of ui5-webcomponents.

Please retest if the desired behavior can be achieved with the web component. If this is not the case, please open a new feature request in the ui5-webcomponents repo.