Forms

The forms and actions system in the Cetegra Catalog has been designed to meet a wide range of needs, from simple comment fields to product configuration and advanced forms and workflows.

The submit actions that are available can be used to send emails or SMS, to add or remove users from AD groups automatically, to add approval steps or other useful actions.

On this page, we will take a look at the forms, describe the different input types, and also see some examples of how to set up forms for different needs.

For a quick intro, check out the introduction page.

To get started, add a new product or edit an existing product. Forms and actions can also be set on a category level, so all products in the category will inherit the configuration. (A product can be set to ignore the category-level actions).

Configuration #

Click the Forms and actions tab in the product/category configuration window.

In the image above, we have the following elements:

• Full width: The input form will be displayed in full width, below the product description.
• Right column: The input forms will be displayed at the right, above the order button.
• Add input: Add different types of form inputs, like text, checkbox and dropdown lists.
• Add section: A section is a group of form input elements
• Add sumit actions: Add different types of submit actions, like add to a group, send an email or add an approval.
• Disable inheritance: Disable any category-level actions that are set.

Display type #

The two display types, full width and right column are used to decide how the form inputs should be displayed for the end user.

The full width display type should be used when the main purpose of the product is user input, like a feedback form, an order form or other cases where multiple inputs are being used.

Example on full width display

The right column is typically used for simple comments, product configurations or other cases where there are just a few inputs.

Example on right column display

Inputs #

There are a lot of different input types that can be used for different needs. Here, we will take a look at each of the different input types.

We will first look at some of the default configurations that are identical on all types of input.

Use input full width? #

The input full width option is active when the form display type is set to full width.

All input types are by default of width 50%, meaning that there are two inputs per line. By checking the “Use input full width” option, the input type is displayed in full width.

Obligatory #

Choose if the input should be optional or required. If required, the user has to write or select a value in the current input field before the order can be placed.

The required inputs are marked with a red asterisk symbol to help the users identify what they need to fill out.

All required input fields are validated when the user submits the order. Any missing input fields are marked with a red warning text and also listed in the popup message.

Label #

The label is the input name visible to the user.

Default value #

The default value is available for the input types Dropdown, Multiline text, Radio select and Text.

The default value is used to set an initial, default value for input.

For the input types Dropdown and Radio select, it is possible to click the default button next to an option to set the option as default selected. (This will copy the option value to the Default value box in the config).

Help text #

Use the help text to provide more info about the input to the users.

When help text is added, an info icon will be displayed next to the input label. The help text will be visible when the user hovers the mouse pointer on the icon.

Name #

A name can be set on an input. When the input has a name, the value the user selects/writes will be available for different submit actions.

The input server_name is used in an email action.

Read more about how to use the input tokens here.

Conditions #

It is possible to control when an input should be displayed by using the conditions configuration.

When setting a condition on an input, the input will only be displayed if it meets the rules that are configured.

It is possible to add multiple conditions. Both AND and OR conditions are supported.

It is also possible to set condition types, like equals, not equals, in and not in.

All named inputs are available to be used as condition rules.

For Dropdown and Radio buttons, the value options are listed to make it easier to set conditions.

In the below example, the storage comment will only be displayed if the disk size input is set to 1 TB.

Conditions can also be set on a section level, hiding all inputs that belong to the section.

Input types #

Checkbox #

Select or deselect the given option.

The Catalog Manager can configure what the checked/unchecked value should be, so it can be used for submit actions.

The default value can be set to Indeterminate (no value), Checked (true) or Unchecked (false).

Date picker #

Select a single date.

Date range #

Select a date range, with a start and end date.

Date and time #

Select a single date and time.

The user has to write the time in the time input.

Date and time range #

Select a date and time range, with start and end date and time.

The user has to write the time in the time input.

Dropdown #

Select a value from a list of predefined options.

The Catalog Manager can populate options one by one, or bulk import with a list.

The user can search for options in the dropdown list, to easily find the correct option in a long list.

To add multiple options, click the Add multiple options button and paste a list of values.

Remove options one by one, or click the menu above the options and select Clear all.

Values in a dropdown list can be used for product variants.

Add a custom placeholder text to help the user understand what to select. Default is “Select an option”.

Attach file #

Let the users attach a file to a request, order or similar.

Specify what file types are allowed.

For now, only one file can be added.

The files can be used with the Send mail submit action, using the mail type Plain with attachments or Html with attachments. Any attachments will then be automatically added to the email.

Clicking the Choose a file button will open a file browser, only allowing the user to select an allowed file type.

Group select #

Select a group from Active Directory.

Info #

Add informational text to the form. This is useful to guide the user on how to fill out the form, to give additional information or for other purposes.

Use the toolbar to format the text as you want.

Multiline text #

To be used for longer text inputs, like comments, descriptions, lists of names and similar.

Radio select #

Select a value from a list of predefined options.

The Catalog Manager can populate options one by one, or bulk import with a list.

The user can search for options in the dropdown list, to easily find the correct option in a long list.

To add multiple options, click the Add multiple options button and paste a list of values.

Values in a radio select list can be used for product variants.

Section #

Group multiple input fields together with a header.

Sections can also be configured with conditions, to control when the input fields in the group should be visible.

Text #

To be used for short text inputs, like name, address, numbers and more.

User select #

Select a user from Active Directory.

Attach fields #

Used to attach fields in the form. The input fields above and below an Attach fields item will be displayed below each other.

Attach fields can be used for example with checkboxes, to simulate multiple choices like the example below.