Generic UI layout: Form with 2 Columns

Support
#1

Hi

We would like to configure the form field in an edit screen as follows:

  1. Two column layout
  2. Emphasize important textfields by giving them more space (left column)
  3. Space consuming input fields (textarea) in the right column
  4. Orderly alignment of rows between the columns
  5. First column fixed width, second column takes “the remaining space” to 100%
  6. When resizing, switch from two columns to one column

With the following code snipplets, we solved (more or less pretty) the first four requirements.

Questions:

  • Is there a simple way to achieve all our requirements? Simple meaning:
    • Without a lot of code
    • With being quite sure, that it works also for platform 8.x
  • If there is no simple way - what could/should we improve in our code for a robust solution for requirements 1-4?

Screenshot of the Screen:

image

Screen definition XML (part)

        <form id="form" dataContainer="userDc">
            <column width="350px">
                <textField id="identifierField" property="identifier"/>
                <textField stylename="borderless" enable="false"/>
                <textField id="firstnameField" property="firstname"/>
                <textField id="lastnameField" property="lastname"/>
            </column>
            <column width="450px">
                <textArea id="remarksField" property="remarks" rowspan="4" height="100%"/>
            </column>
        </form>
#2

Hi
For #6 in your example, I needed similar behaviour and did the following:
use two forms for those two columns and wrap them together within a flowBox

#4

Hello,

About improving 1-4, I think you also can use label with configured height instead of disabled textField. You can set height or add stylename which will contain height depending on theme variable ($v-unit-size, $v-layout-margin-bottom). Possibly, the color of textField will not always be the same as the application background, in this case, you will see your “divider”.

  1. You can use flex attribute to expand second column. For instance:
<form id="form" width="100%">
    <column width="350px">
        ...
    </column>
    <column width="100%" flex="1">
        ...
    </column>
</form>
  1. Probably it will not work correctly with the fifth requirement (Form is based on grid layout). You can try to use two forms and play with CSS flex or with SW responsive add-on.

The result form layout:

<form id="form" width="100%" dataContainer="userDc">
    <column width="350px">
        <textField id="identifierField" property="identifier" enable="false"/>
        <label stylename="label-form-field-divider"/>
        <textField id="firstnameField" property="firstname"/>
        <textField id="lastnameField" property="lastname"/>
    </column>
    <column width="100%" flex="1">
        <textArea id="remarksField" property="remarks" rowspan="4" height="100%"/>
    </column>
</form>

.label-form-field-divider {
  height: $v-layout-margin-bottom/2;
}

You also can add min-width to the textArea if it will be collapsed: css="min-width:200px;"

1 Like
#6

OK! Thank you both - will try it out and post if I did anything additional to your suggestions.