Types of input modules

Descriptions for the individual types of input modules

Number:

The number module is used to control properties based on numerical values.

Parameters:

  • Min value: The starting value

  • Max value: The maximum value

  • Increment: The increment when using the slider

Position:

The Position module is used to control properties based on 2-dimensional numerical value-pairs.

Parameters:

  • Min-X: The starting value for the first value of the pair

  • Max-X: The maximum value for the first value of the pair

  • Min-Y: The starting value for the second value of the pair

  • Min-Y: The maximum value for the second value of the pair

Color:

The color module is used to control properties based on color codes.

There are no parameters to set.

Text:

The text module is used to control properties based on text (strings).

Parameters:

The available parameters depend on whether the input module is connected to Plain Text or Rich Text. Available in both cases are:

  • Show Character Count: Toggles the visibility of a character count indicator.

  • Show clear button: Toggles the visibility of a button to clear the input field.

  • Enforce uppercase: Toggle so that all input is converted to uppercase font

  • Max total number of characters: Set a maximum number of characters

  • Max number of characters per line: Set a maximum number of characters per line

  • Max number of lines: Set a maximum number of lines

Available only to Plain Text:

  • Allow Multiline: Toggle to allow or deny the user to set line breaks manually

Available only to Rich Text:

  • No Style Label: The displayed name of the default style (Use this parameter option to translate the label into your user's native language)

  • Mixed Style Label: The displayed name of the mixed styles being selected (Use this parameter option to translate the label into your user's native language)

  • Allow user agent rich text: Some operating systems allow you to apply styles such as bold and italic to any text. This parameter lets you toggle whether or not to apply these styles to the text in the template.

  • Rich Text Rules: Here you can add and define your own styles (as rules overriding the default style)

  • Custom Class Highlight Colors: The highlight colors are used to mark in the input field all characters to which a style rule is applied. A highlight color is applied only if the style rule is given a custom class name. You should use highlight colors when it would otherwise be difficult to see the differences within the input field (for example, when the effect of a style rule is visible only within the template, but not within the input field).

Rich Text Rule-Parameters:

  • Rule name: The displayed name of the custom style.

  • Font Weight, Font Style, Letter Spacing, Color: These are the properties whose default values will be overwritten with the specified values (The number of specifiable properties will be extended in upcoming updates).

  • Custom Class: The name of the Custom Class is an identifier that is added to all characters to which the style rule is applied. This identifier has no visible effect itself, but can be used as a parameter of the GET_FEATURES function of the expression editor. The GET_FEATURES function returns the bounding box positions of all individual parts of the text to which the style rule is applied. This can be used to make elements reactive only to the parts of a text marked with the specific style rule (e.g. positioning background elements behind a marked part of the text).

Image:

The image module is used to control the Source property of image elements.

Parameters:

  • Allow image upload from device: Toggle to allow or deny the upload of an image from the user's device. If denied, the user can only select an image from one of the connected cloud services.

  • Transparency: Toggle to allow or deny transparency in the selected or uploaded images. When transparency is disabled, the selected image is converted to a JPG.

  • Services: You can connect cloud services to the input module to provide the user with a selection of images.

    • Pixabay: Pixabay is a free image database. Connecting to Pixabay is very useful for non-specific background images. You need to enter your own API key to connect Pixabay.

    • Google Drive: You can connect a public Googledrive folder by posting the link to it. Connecting to a Googledrive folder is useful if you want to provide users with a selection of specific images (such as internal or approved images).

    • OneDrive: Works identically to Googledrive

Switch:

The switch module is used to control properties based boolean values ('true' or 'false').

Parameters:

  • Checked: 'true' - label

  • Unchecked: 'false' - label

Select:

The Select module is used to control properties based on any type, allowing only a specified set of discrete values.

Parameters:

  • Option Rendering Mode: Decide whether the Option Visual should be in cover mode or in contain mode

  • Option Visual: You can configure the Option Visual by clicking on the small image to the left of the value. This will open a popover menu with two tabs: File and SVG. You can use either method to create a visualization for each discrete value option.

    • File: Upload an image

    • SVG: Write SVG code

  • Values: Set the discrete values for the selection. You can duplicate an existing value to create a new option.

Collection:

The collection module is used to create a set of duplicatable input modules. You can include any type of input module to the input group layout. The user can then create duplicates of the input group within the collection.

The Collection module is used for an advanced use case: Allow your user to create new elements within the template in a controlled way (for example, if a template contains a list).

There will be a detailed tutorial on this use case soon.

Parameters:

  • Input group layout: Specify which input modules each input group should contain.

  • Min number of input groups: Set the required minimum number of duplicates of the input group.

  • Max number of input groups: Set the maximum number of duplicates of the input group.

Last updated