FormContainer Layout: Expand Text Area over Columns

Question

I'm new to SAPUI5. As my first assignment, I got the task to build a layout with FormContainer.

The mockup looks like this:

My source code:

<form:Form id="00"
    width="100%"
    editable="true"
    visible="true"
>
    <form:formContainers>
        <form:FormContainer visible="true">
            <form:formElements>
                <form:FormElement binding="{TODO}">
                    <form:label>
                        <m:Label
                            text="Ursachencode"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                    />
                    </form:label>
                    <form:fields>
                        <m:Input value="Erprobung / Machbarkeit fehlend /unzureichend"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
        <form:FormContainer visible="true">
            <form:formElements>
                <form:FormElement binding="{TODO}">
                    <form:label>
                        <m:Label
                            text="Fehlerschlüssel"
                            design="Standard"
                            width="100%"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:Input value="-"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer visible="true" width="200%">
            <form:formElements>
                <form:FormElement binding="{TODO}">
                    <form:label>
                        <m:Label
                            text="IST-Zustand"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea
                            value="senf"
                            maxLength="100"
                            width="100%"
                        />
                    </form:fields>
                </form:FormElement>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Soll-Zustand"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea
                            value="senf"
                            maxLength="100"
                            width="100%"
                        />
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer visible="true">
            <form:formElements></form:formElements>
        </form:FormContainer>
        <form:FormContainer>
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Ursache"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea
                            value="senf"
                            maxLength="100"
                        />
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer visible="true">
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Sofortmaßnahmen"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:TextArea maxLength="100"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
        <form:FormContainer>
            <form:formElements>
                <form:FormElement>
                    <form:label>
                        <m:Label
                            text="Anlagen"
                            design="Standard"
                            width="100%"
                            required="true"
                            textAlign="Begin"
                            textDirection="Inherit"
                        />
                    </form:label>
                    <form:fields>
                        <m:Input
                            value="5 WHY"
                            enabled="false"
                        />
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
    <form:layout>
        <form:ResponsiveGridLayout/>
    </form:layout>
</form:Form>

So my problem lies within the "IST-Zustand" and "Soll-Zustand". I cant get the text areas to expand over both columns. Is there a way to do that?

Answer 1

Here is a working example: https://embed.plnkr.co/u0WUn2/

• Set GridLayout as the layout control for <Form>.
• Apply halfGrid layout data for each <FormContainer> accordingly (default is false).

---

The disadvantage of the above approach is that it's not responsive. If necessary, make the form adaptive to the device size via Device API. E.g.: halfGrid="{:= ${device>/resize/width} > 600}".