Layout and Formatting of Input Fields (Reference)
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.
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 Unity (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 Unity (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 Unity 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 Unity 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:
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 Unity (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.
Found an issue in documentation? Write to us.