Layout and Formatting of Input Fields (Reference)

1 Input Groups / Collapsible Sections
- 1.1 Input Group via CollapseInputBuilder
- 1.2 Input Group via parameterGroup
2 Inputs Side by Side
- 2.1 Side by Side using RowInputBuilder
- 2.2 In Multiple Columns Using Header Display Settings
3 Formatting of Input Fields
- 3.1 Label
- 3.2 Hints for Users

Input Groups / Collapsible Sections

You can group several input fields together into a collapsible section. This is useful whenever there are many inputs, because it’s easier to navigate when they’re in separate sections/groups.

The UI will organize the input fields in collapsible sections.

Figure 1. Rendering of the collapsible sections on the Quote Item

Figure 2. When the user expands the section, the inputs show up

Input Group via CollapseInputBuilder

The primary way, how to configure the collapsible sections, is CollapseInputBuilder. Here you can also control, if the section comes up initially collapsed or expanded.

With Pricefx (React version) this method works on:

Documents (Quote, Rebate, Agreement/Promotion)
- Header
- Line item
Forms (Configurators)

Creation of the input groups/sections in Quote Item logic using CollapseInputBuilder

api.inputBuilderFactory()
        .createCollapseLayout("MySection1")
        .setLabel("My Section 1")

        .addInput(
                api.inputBuilderFactory()
                        .createStringUserEntry("StringUserEntry1")
                        .buildContextParameter()
        )

        .addInput(
                api.inputBuilderFactory()
                        .createTextUserEntry("TextUserEntry2")
                        .buildContextParameter()
        )

        .getInput()

Code samples of Collapsible Section with inputs using CollapseInputBuilder:

Input Group via parameterGroup

This is another method how to create the collapsible section with input fields. Do not mix the two approaches - parameterGroup and CollapseInputBuilder - together. Use either one, or the other.

The section is rendered in the same way as when using CollapseInputBuilder, but here you cannot control if the section comes up initially collapsed or expanded.

You can assign an input field into the same section/group using AbstractInputBuilder.setParameterGroup(). The UI will organize the input fields in collapsible sections.

With Pricefx (React version) this method works on:

Documents (Quote, Rebate, Agreement/Promotion)
- Header
- Line item
Dashboard filters
Forms (Configurators)

Creation of the input groups/sections in Quote Item logic using parameterGroup

api.inputBuilderFactory().createStringUserEntry("myItemInput1")
        .setParameterGroup("My Parameter Group 1")
        .getInput()

api.inputBuilderFactory().createStringUserEntry("myItemInput2")
        .setParameterGroup("My Parameter Group 2")
        .getInput()

api.inputBuilderFactory().createStringUserEntry("myItemInput3")
        .setParameterGroup("My Parameter Group 2")
        .getInput()

Code samples of Collapsible Section with inputs using parameterGroup:

Behavior:

The group displays collapsed by default.
The order of the groups depends on the order in which they were defined.
If an input is not assigned to a group, it will be visible and placed in the order, in which it was defined.

Inputs Side by Side

When you add several input fields to a page, they’re rendered based on the page type, which usually means below each other.

Side by Side using RowInputBuilder

To position them side by side, you can use the RowInputBuilder. Of course, side by side layout is possible only when there’s enough space on the page for it. Otherwise, the inputs will be rendered below each other.

The space available for rendering of the inputs will be split among the inputs based on the flex parameter - the number sets the proportion size of one input field with respect to others. If flex is not defined, it behaves as number 1.

With Pricefx UI (React version) this method works on:

Documents (Quote, Rebate, Agreement/Promotion)
- Header
- Line item
Forms (Configurators)

Creation of side-by-side input fields positioning in Quote Item logic

api.inputBuilderFactory()
        .createRowLayout("MyRowLayout1")

        .addInput(
                api.inputBuilderFactory()
                        .createUserEntry("UserEntry1")
                        .setFlex(1)
                        .buildContextParameter()
        )

        .addInput(
                api.inputBuilderFactory()
                        .createTextUserEntry("TextUserEntry1")
                        .setFlex(2)
                        .buildContextParameter()
        )

        .addInput(
                api.inputBuilderFactory()
                        .createStringUserEntry("StringUserEntry1")
                        .buildContextParameter()
        )

        .getInput()

Code samples of side by side positioning of inputs using RowInputBuilder:

In Multiple Columns Using Header Display Settings

When you have a lot of inputs on document header and want to display them in more columns, you can also use another method - numberOfFieldsPerLine.

With Pricefx UI (React version) this method works on:

Documents (Quote, Rebate, Agreement/Promotion)
- Header

Sample code, used to generate the previous screenshot

Code samples of positioning the inputs into more columns:

Quote Header Logic

Formatting of Input Fields

There are many formatting options common for all input fields. You can find the complete list at AbstractInputBuilder in Groovy API documentation.

Label

The label of the field appears above the input field and can be also translated into more languages, if needed.

Setting of the Label and Translations

Hints for Users

You can help the user understand what you expect them to enter to the input field in several ways.

With Pricefx (React version) these work on:

Documents (Quote, Rebate, Contract)
- Header
- Line item
Forms (Configurators)

Code samples of input field formatting:

Value Placeholder

Text, which appears in the place, where the user is expected to enter the value. The advantage is that this text is visible immediately, so you can place se some hint, what you expect them to enter - see AbstractInputBuilder.setPlaceholderText().

Title / Tooltip

Short text, which appears when you hover the mouse over the Label - see AbstractInputBuilder.setTitle().

Help Text & URL Link

Somewhat longer text explaining the meaning of the input field. Renders on the screen as a question mark icon, and when the user hovers over it, it shows the text - see AbstractInputBuilder.setHelpText().

You can also provide a URL, which can lead to any page with even more explanation or further reading - see AbstractInputBuilder.setHelpLink(). This will be rendered as a link with "Learn more" text.