Setting the Width of Form Elements

Design Concept

Pricefx Unity app has several rules and defaults for how it renders forms and their inputs and Groovy provides some ways 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 this cannot be overridden by Groovy.

The smaller the screen, the bigger the adjustments. On very small screens (e.g. mobile phones) all inputs are rendered as one input per row. The breakpoint for this behavior 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 overridden – 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. Configurator, Row, Collapse...).

As for many other rules, there is 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 (this behavior can however be overridden, as described later).

Configuration

Note: InputWidth in the examples is imported like this:
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 Configurator, 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 Inputs to 800 px

As mentioned earlier, there is an exception for input widths in modal windows so that these inputs are rendered as 100 % wide by default. If for some reason one would need a very wide modal but inputs only 800 px wide by default that can be achieved by setting the setDefaultWidth(InputWidth.LARGE) function on the Configurator builder, like this:

api.inputBuilderFactory()
    .createConfiguratorInputBuilder("Popup (width 1200, inputs still only 800 px)", "FormLayout", false)
    .addToConfiguratorEntry(configurator)
    .setDimensions('1200', '500')
    .setDefaultWidth(InputWidth.LARGE)
	.buildContextParameter()

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()

Playground

Logic: https://e2e-gcp.pricefx.com/app/modules/#/administration/logics/calculationlogics/genericlogic/2147485273

Custom Form definition: https://e2e-gcp.pricefx.com/app/modules/#/administration/logics/headerlogics/customforms/2147485272 (do mind there is a DefaultWidth.MAX formatting option)

Resulting Custom Form: https://e2e-gcp.pricefx.com/app/modules/#/processes/custom-forms/44.CFOT/405.CFO