Michu93
Michu93

Reputation: 5689

Two columns of labels in formContainers in OpenUI5

I am using:

<f:layout>
         <f:ResponsiveGridLayout columnsM="1"/>
</f:layout>

and when I add many labels with texts:

 <f:FormElement label="{i18n>va1}">
        <f:fields>
            <Text
                text="{data>/customer/name}"
            />
        </f:fields>
 </f:FormElement>

then it looks like this:

label: text
label: text
label: text
label: text

and I would like to have this:

label:text    label:text
label:text    label:text

how can I achieve this?

@Edit

 <Panel>
            <my:FormPanel>
                <f:Form id="id-form" editable="true">
                    <f:layout>
                        <f:ResponsiveGridLayout columnsM="1"/>
                    </f:layout>
                    <f:formContainers>
                        <f:FormContainer>
                            <f:title>
                                <Title text="title"/>
                            </f:title>
                            <f:formElements>
                                <f:FormElement label="lab1">
                                    <f:fields>
                                        <Text text="text1" />
                                    </f:fields>
                                </f:FormElement>
                                <f:FormElement label="lab2">
                                    <f:fields>
                                        <Text text="text2" />
                                    </f:fields>
                                </f:FormElement>
                                <f:FormElement label="lab3">
                                    <f:fields>
                                        <Text text="text3"/>
                                    </f:fields>
                                </f:FormElement>
                                <f:FormElement label="lab4">
                                    <f:fields>
                                        <Text text="text4" />
                                    </f:fields>
                                </f:FormElement>
                            </f:formElements>
                        </f:FormContainer>
                    </f:formContainers>
                </f:Form>
            </FormPanel>
        </Panel>

I was thinking about some grid layout or packing lab1 and lab2 to one container and lab3 and lab4 to another.

Upvotes: 0

Views: 591

Answers (1)

Inizio
Inizio

Reputation: 2256

You can achieve it by using span and layoutData

<VBox class="sapUiSmallMargin">
    <f:Form editable="true">
        <f:layout>
            <f:ResponsiveGridLayout
                    labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="1"
                    emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0"
                    columnsXL="1" columnsL="1" columnsM="1"
                    singleContainerFullSize="false" adjustLabelSpan="false"/>
        </f:layout>
        <f:formContainers>
            <f:FormContainer>
                <f:formElements>
                    <f:FormElement label="Label">
                        <f:fields>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                            <Text text="Label:" class="cLabel">
                                <layoutData>
                                    <l:GridData span="XL1 L1 M1 S1" />
                                </layoutData>
                            </Text>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                        </f:fields>
                    </f:FormElement>
                    <f:FormElement label="Label">
                        <f:fields>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                            <Text text="Label:" class="cLabel">
                                <layoutData>
                                    <l:GridData span="XL1 L1 M1 S1" />
                                </layoutData>
                            </Text>
                            <Text text="Text" >
                                <layoutData>
                                    <l:GridData span="XL1 L2 M2 S4" />
                                </layoutData>
                            </Text>
                        </f:fields>
                    </f:FormElement>
                </f:formElements>
            </f:FormContainer>
        </f:formContainers>
    </f:Form>
</VBox>

CSS

.cLabel.sapMText {
  color: #666;
}

Output

enter image description here

Note: Adjust the span values as per your requirement

Upvotes: 1

Related Questions