Page Comparison

Design

...

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

<!-- (This actually is the most platform independent comment) -->

...

Concept

...

Pricefx app has several rules and defaults for how it renders forms and their inputs and groovy 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 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 on a single row. This cannot be overriden by groovy.
as one input per row. The breakpoint for this behaviour 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 of inputs can be overriden - 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. EmbeddedConfiguratorConfigurator, Row, Collapse...).

As for every great rulemany other rules, there exists 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 sothis:
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 EmbeddedConfiguratorConfigurator, 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

...

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').

...

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