Setting the width of form elements

Design concept

!img(src='' meta="big screen / tablet / mobile - with our design system printscreens")

[comment]: # (This actually is the most platform independent comment)

Unity app has several rules and defaults for how it renders forms and their inputs and groovy provides some ways on how to alter these.
This guide aims to describe these rules and how to configure them to match desired form layout outcomes.

Responsivity

The form inputs are responsive out of the box and on small screens (e.g. mobile phones) all inputs are rendered on a single row. This cannot be overriden by groovy.
The breakpoint for this behaviour is 480px.

Defaults

There is a default max-width for form inputs which is 800 px. This is intended to make all forms human friendly by default even on very wide displays.

This max-width is different for date inputs, which are naturally smaller as the length of their contents is given.

This max-width of inputs can be overriden - either for single inputs by using setWidth(), or it can be overridden for the whole form (or even just some of its sections) by using setDefaultWidth() on a parent element (a parent element can be anything that can contain other inputs e.g. EmbeddedConfigurator, Row, Collapse...)

As for every great rule, there exists an exception. The 800 px max-width rule does not apply for inputs in modal windows. In modals the default width for all inputs is 100 %. This is to simplify the work with forms in modals as the modal width is controlled separately.

Configuration

Note: InputWidth in the examples is imported like so:
import net.pricefx.formulaengine.scripting.inputbuilder.AbstractInputBuilder.InputWidth

There are four options of InputWidth supported:

• SMALL - 25 % of width

• MEDIUM - 50 % of width

• LARGE - 100 % of width up to a maximum of 800 px

• MAX - 100 % of width (with no maximum)

Setting the width of a single input

This is the simplest scenario. Just add .setWidth(InputWidth.MEDIUM) to a context parameter.

def configurator = api.createConfiguratorEntry()

api.inputBuilderFactory()
  .createStringUserEntry("SimpleStringEntry")
  .setTextMask("Enter text")
  .setLabel("A string entry")
  .setWidth(InputWidth.SMALL)
  .addToConfiguratorEntry(configurator)

return configurator

Setting the width of all inputs in a container

A container can be either an EmbeddedConfigurator, a Collapse, a Row or a similar parameter.

For setting the child width there is a function .setDefaultWidth()

def configurator = api.createConfiguratorEntry()

api.inputBuilderFactory()
        .createCollapseLayout("Collapse")
        .setWidth(InputWidth.MAX) // sets the width of the collapse to 100 % of available space
        .setDefaultWidth(InputWidth.MAX) // sets the width of all children inputs to 100 % of available space
        .addInput(
                api.inputBuilderFactory()
                        .createOptionEntry("OptionEntry")
                        .setPlaceholderText("Select an option :)")
                        .setLabel("An option entry with refresh in a collapse")
                        .setOptions(["blue_pill", "red_pill"])
                        .setLabels([blue_pill: "Blue pill", red_pill: "Red Pill"])
                        .buildContextParameter()
        )
        .addToConfiguratorEntry(configurator)

return configurator

or

api.inputBuilderFactory()
    .createConfiguratorInputBuilder("EmbeddedConfigurator", "logicName", true)
    .addToConfiguratorEntry(configurator)
    .setDefaultWidth(InputWidth.MAX)
	.buildContextParameter()

Setting the width of inputs in a Row

There are two ways to set the width of inputs in a row:

• setWidth()

• setFlex()

Whilst setWidthis a universal function working everywhere and has already been described above, the setFlex is quite nice and useful alternative that works by specifying the proportion of widths of adjacent inputs in a Row.
The default flex of an input is 1.
The minimum width of an input is 150 px. Inputs in a row will get smaller the more of them is put into the row. When they reach the 150 px threshold, they will wrap to a new line.

Setting the width of a PopupConfigurator modal window

Modal windows width (and height) are set when creating the Configurator by the function setDimensions('width', 'height').

Default width is 520px.

Inputs within a modal do not have an 800 px max-width by default, they span 100 % of available width instead.

api.inputBuilderFactory()
    .createConfiguratorInputBuilder("Popup (width 600, height 500)", "FormLayout", false)
    .addToConfiguratorEntry(configurator)
    .setDimensions('600', '500')
	.buildContextParameter()