Other Components Properties
    • PDF

    Other Components Properties

    • PDF

    Article Summary

    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
    NOTE
    If you want to skip to our How to videos section and learn how to use Other components, click here.

    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:

    • Clicking the icon
    • Creating a new transaction data item
    NOTE

    Label

    Enables to add a label to the component

    NOTE

    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

    • When checked - disables the component
    • When not checked - enables to use the component to input text


    -

    Text Direction

    Enables to set the text direction of the component:

    • Auto
    • Right to left (Rtl)
    • Left to right (Ltr)


    Error Msg

    NOTE

    The Model validations replaced this option, for additional information, see the Validations article


    -

    Pattern

    Enables to set a text input patterns:

    • [0-9] - numbers only input
    • [a-z] - letters (English) only input

    -

    Max Length

    Enables to set a maximum input length

    Comment

    Enables to write a comment underneath the text input field

    NOTE

    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

    • When checked - displays an indication that the input data is valid
    • When not checked - disables the option to display an indication that the input data is valid

    -

    Show X Mark

    • When checked - displays an indication that the input data is not valid
    • When not checked - disables the option to display an indication that the input data is not valid


    -

    Type

    Enables to set the input type:

    • Text
    • Number
    • Email
    • Tel
    • Amount
    • amount with 2 decimal places
    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

    NOTE

    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

    • When checked - enables to hide the asterisk that appears next to a required text input field
    • When not checked - enables to display the asterisk that appears next to a required text input field
    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.

    NOTE
    • If the mask direction during text input is wrong, check the “reverseMaskDirection" checkbox
    • An added mask does not appear on a PDF, it is only visible on the UI of the digital process, for additional assistance please contact our support team 


    -

    Add Symbol

    Enables to add a symbol next to the text to input:

    • None
    • USD $
    • Euro €
    • GBP £
    • JPY #
    • NIS ₪
    • percentage %
    • Yen 円
    • ThousanYen ナ 円
    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

    NOTE
    Input data can be loaded automatically when setting the input value to Autocomplete Service using the Model, for additional information, see the Values article


    -

    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

    NOTE

    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:

    • Clicking the icon
    • Creating a new transaction data item
    NOTE

    Default Image

    Enables to set a .jpg or .png as a default image

    NOTE
    • Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the Themes Overview article
    • A default image will not replace the background image of the Main Page/Greeting Page components

    -

    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:

    • Left
    • Center
    • Right

    -

    + Add to Agent

    Enables to add the component to the Agent screen

    NOTE

    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

    NOTE

    The height must be comprised from a number and px, for example: 10px

    Color

    Enables to set the color of the component

    NOTE

    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

    NOTE

    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:

    • Clicking the icon
    • Creating a new transaction data item
    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

    NOTE

    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:

    • Clicking the icon
    • Creating a new transaction data item
    NOTE

    -

    Max Items

    Enables to set the maximum number of array items

    NOTE

    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

    NOTE

    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:

    • Clicking the icon
    • Creating a new transaction data item
    NOTE

    -

    With Title

    • When checked - enables to display the title (if a title was set) of the component
    • When not checked - disables the option to display the title of the component even if it was set

    -

    Title Text

    Enables to set the title of the component

    NOTE

    The title will be displayed if the withTilte option is checked

    -

    Accept File Types

    Enables to set the accepted file types for upload

    NOTE
    The accepted file types must be written in the following fashion: .filetype, .filetype - for example: .jpg, .png, .pdf

    -

    + Add to Agent

    Enables to add the component to the Agent screen

    NOTE

    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

    NOTE

    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

    NOTE

    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:

    • Clicking the icon
    • Creating a new transaction data item
    NOTE

    -

    Required

    • When checked - enables to set the component as required
    • When not checked - enables to set the component as not required

    Instruction

    Enables to set instructions that describe how to use the component

    NOTE

    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

    NOTE

    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

    NOTE

    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:

    • Clicking the icon
    • Creating a new transaction data item
    NOTE

    Label

    Enables to add a label to the component

    NOTE

    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

    • When checked - disables the component
    • When not checked - enables to use the component to input text


    -

    Text Direction

    Enables to set the text direction of the component:

    • Auto
    • Right to left (Rtl)
    • Left to right (Ltr)


    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

    NOTE

    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

    • When checked - displays an indication that the input data is valid
    • When not checked - disables the option to display an indication that the input data is valid

    -

    Show X Mark

    • When checked - displays an indication that the input data is not valid
    • When not checked - disables the option to display an indication that the input data is not valid

    -

    Show Required Asterisk

    • When checked - enables to display the asterisk that appears next to a required text input field
    • When not checked - enables to hide the asterisk that appears next to a required text input field
    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

    NOTE

    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:



    Was this article helpful?