- PDF
Other Components Properties
- PDF
Other Components Properties
The following sections detail the properties of the Other section components. The Other section components are:
- Text Input
- Dynamic Image
- Br Component
- Running Number Indicator
- Array Buttons
- Upload competent
- Progress Bar
- Signature
- Date Input
Text Input
After adding the Text Input component, configure its properties, design its look, and connect it to the Model.
Figure 1 and Table 1 describe the properties of the Text Input component:
Figure 1: Text Input Properties Section
Table 1: Text Input Properties Section
Number | Icon | Name | Description |
![]() | ![]() | Model | Enables to connect the component to the Model by:
NOTE
|
Label | Enables to add a label to the component The globe icon allows you to add labels in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the Multi-Language article | ||
- | Disabled |
| |
- | Text Direction | Enables to set the text direction of the component:
| |
| Error Msg | NOTE The Model validations replaced this option, for additional information, see the Validations article | |
- | Pattern | Enables to set a text input patterns:
| |
- | Max Length | Enables to set a maximum input length | |
Comment | Enables to write a comment underneath the text input field The globe icon allows you to write the comment in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the Multi-Language article | ||
- | Show Valid Tick |
| |
- | Show X Mark |
| |
- | Type | Enables to set the input type:
NOTE When a digital process runs on a mobile device, different keyboards (text or numbers ) will appear automatically | |
Placeholder | Enables to add a placeholder to the text input field The globe icon allows you to write the placeholder in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the Multi-Language article | ||
- | Hide Asterisk On Required |
NOTE A field is set as required using the Model validations, for additional information, see the Validations article. | |
- | Mask | Enables to input a string of characters that indicates the valid input values, for example, mask will be used when the text input component stores information such as phone numbers so that requires ten digits of input. | |
- | Add Symbol | Enables to add a symbol next to the text to input:
NOTE An added symbol does not appear on a PDF, it is only visible on the UI of the digital process | |
- | Loading Spinner On | Enables to display a spinner when input data is loading automatically | |
- | Reverse Mask Direction | Enables to reverse the direction of the mask that was set | |
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Dynamic Image
After adding the Dynamic Image component, configure its properties, design its look, and connect it to the Model. Figure 2 and Table 2 describe the properties of the Dynamic Image component:
Figure 2: Dynamic Image Properties Section
Table 2: Dynamic Image Properties Section
Number | Icon | Name | Description |
Model | Enables to connect the component to the Model by:
NOTE
| ||
Default Image | Enables to set a .jpg or .png as a default image | ||
- | Width in pixels (px) | Enables to set the width of the image in pixels | |
- | Width in % | Enables to set the width of the image in percentages | |
- | Horizontal Align | Enables to set the horizontal alignment of the image:
| |
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component from the canvas |
Line Break (Br) Component
After adding the Br component, configure its properties and design its look.
Figure 3 and Table 3 describe the properties of the Br component:
Figure 3: Br Component Properties Section
Table 3: Br Component Properties Section
Number | Icon | Name | Description |
- | Height | Enables to set the height of the component in pixels The height must be comprised from a number and px, for example: 10px | |
Color | Enables to set the color of the component The color is selected from a color palette or the Theme of the Webflow. For additional information about Themes, see the Themes Overview article | ||
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Running Number Indicator
After adding the Running Number Indicator component, connect it to the Model. Figure 4 and Table 4 describe the properties of the Running Number Indicator component:
Figure 4: Running Number Indicator Component Properties Section
Table 4: Running Number Indicator Component Properties Section
Number | Icon | Name | Description |
Model | Enables to connect the component to the Model by:
NOTE
| ||
- | Title | Enables to set the title that will be displayed when a new array item is created | |
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Array Buttons
After adding the Array Buttons component, configure its properties and connect it to the Model. Figure 5 and Table 5 describe the properties of the Array Buttons component:
Figure 5: Array Buttons Component Properties Section
Table 5: Array Buttons Component Properties Section
Number | Icon | Name | Description |
Model | Enables to connect the component to the Model by:
NOTE
| ||
- | Max Items | Enables to set the maximum number of array items trying to add array items above the maximum set number by clicking the Add More button will result in nothing | |
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Upload Component
After adding the Upload Component, configure its properties, design its look, and connect it to the Model. Figure 6 and Table 6 describe the properties of the Upload component:
Figure 6: Upload Component Properties Section
Table 6: Upload Component Properties Section
Number | Icon | Name | Description |
Model | Enables to connect the component to the Model by:
NOTE
| ||
- | With Title |
| |
- | Title Text | Enables to set the title of the component The title will be displayed if the withTilte option is checked | |
- | Accept File Types | Enables to set the accepted file types for upload | |
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Progress Bar
After adding the Progress Bar component configure its properties. Figure 7 and Table 7 describe the properties of the Progress Bar component:
Figure 7: Progress Bar Component Properties Section
Table 7: Progress Bar Component Properties Section
Number | Icon | Name | Description |
- | Active | Enables to set what is the current active Progress Bar step | |
Steps | Enables to set the steps of the Progress Bar The offset of the steps is +1 so the first step is set to 0 | ||
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Signature
After adding the Signature component, configure its properties, design its look, and connect it to the Model. Figure 8 and Table 8 describe the properties of the Signature component:
Figure 8: Signature Component Properties Section
Table 8: Signature Component Properties Section
Number | Icon | Name | Description |
Model | Enables to connect the component to the Model by:
NOTE
| ||
- | Required |
| |
Instruction | Enables to set instructions that describe how to use the component The globe icon allows you to write instructions in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the Multi-Language article | ||
Button Text | Enables to set the text of the button The globe icon allows you to write the button text in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the Multi-Language article | ||
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
Date Input
After adding the Date Input component, configure its properties, design its look, and connect it to the Model. Figure 9 and Table 9 describe the properties of the Date Input component:
Figure 9: Date Input Component Properties Section
Table 9: Date Input Component Properties Section
Number | Icon | Name | Description |
![]() | ![]() | Model | Enables to connect the component to the Model by:
NOTE
|
Label | Enables to add a label to the component The globe icon allows you to add labels in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the Multi-Language article | ||
- | Disabled |
| |
- | Text Direction | Enables to set the text direction of the component:
| |
Error Msg | NOTE This option was replaced by the Model validations, for additional information, see the Validations article | ||
Comment | Enables to write a comment underneath the date input field The globe icon allows you to write the comment in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the Multi-Language article | ||
- | Show Valid Tick |
| |
![]() | - | Show X Mark |
|
![]() | - | Show Required Asterisk |
NOTE A field is set as required using the Model validations, for additional information, see the Validations article |
- | + Add to Agent | Enables to add the component to the Agent screen This button will only appear if the Journey Sender feature is enabled, for additional information, see the Journey Sender article | |
- | Delete | Enables to delete the component |
How to Videos
To quickly learn how to use Other components, watch the following videos.
- Text Input:
- Dynamic Image:
- Upload Component:
- Signature:
- Date Input: