LogoLogo
WEM ModelerWEM ReferenceTutorialsMyWEM
  • WEM Platform Documentation
  • Getting Started
    • Introducing WEM
    • Create WEM Account
    • WEM Login
    • MyWEM Portal
      • MyWEM Features
      • MyWEM Support
      • Allow Support Access
    • Partner Portal
  • WEM Modeler
    • Introducing the WEM Modeler
    • Modeler Start Page
    • Manage Projects & Workspaces
    • User Roles Scheme
    • Create a new Project
    • Modeler Application Overview
    • Project Settings
      • Project Configuration
      • Security Settings
      • Portal Settings
      • SMTP Settings
      • Mobile App Settings
    • Expression Editor
    • Flowcharts
      • User Interaction
      • End Node
      • Sub-flowchart
      • Navigation
      • Clear session
      • Decision
      • Assignment
      • List Action
      • Loop
      • Copy Data
      • Save and Discard
      • Import Data
      • Export Data
      • Invoke Webservice
      • HTTP Request
      • Execute Process
        • Different processes explained
        • Send Email
        • Change settings
        • Changing files
        • Generate File
      • Ping server
      • Authenticate
      • Comet Messages
      • OpenAI
      • Async Tasks
      • Note Node
    • Data Model
      • WEM Session Folder
    • Services and Integration
      • Webservices
      • Remote Data Sources
      • Authentication Providers
        • SAML 2.0
          • SAML App Registration in EntraID
        • OAuth 2.0
      • Comet - Real Time Messages
      • Certificates
    • Concepts and Concept Queries
      • Concepts
      • Concept Queries
      • Concept Relations
    • Navigation
      • HTTP Endpoints
      • Tasks
    • Files and Assets
      • Widget Libraries
      • Template Fragments
      • Files
      • Hyperlinks
    • Multilanguage Dictionary
    • Agentic AI
      • WEM AI Agent
      • AI Flowchart Nodes
      • AI User Interaction
    • WEM Preview
    • WEM Runtime
      • Publishing Process
      • Staging
      • Live
    • Debugging
  • Template Editor
    • Interaction Template Editor
      • Interaction Template Hotkeys
    • General and preview
    • Style
      • Heading Type
      • Paragraph Style
      • Text Styling
      • Alignment
      • Hyperlink
      • Tooltip
    • Layout
      • Adaptive columns
      • Div
      • Panel
      • Alert
      • Table
      • Image
      • Icon
      • Label
    • Interaction
      • Form
      • Validation
      • Required field
      • Button
      • Dropdown
      • Free form item
    • Miscellaneous
      • Tabbar
      • Google maps
      • Nested template
      • Script
      • Reference
      • Conditional
      • Data grid
      • Repeater
      • Rich text
      • Custom
    • WMT Tool
  • WEM Reference
    • WEM Expressions Reference
    • Functions
      • Aggregation
        • Average
        • Count
        • First
        • Last
        • Max
        • Min
        • Sum
      • Concepts
        • ConceptId
        • Description
        • FindConcepts
        • GetAncestors
        • GetChildren
        • GetDescendants
        • GetParent
        • Intersection
        • LocalName
        • Synonyms
        • ToConcept
        • Union
      • Date
        • Date
        • DateDiff
        • DateOnly
        • DatePart
        • DayOfWeek
        • FromUnixTimestamp
        • MoveDate
        • Now
        • TimeOfDay
        • Today
        • ToDuration
        • ToLocal
        • ToUnixTimestamp
        • ToUTC
        • UTCNow
        • UTCToday
      • Environment
        • ApplicationId
        • CountryCode
        • CountryName
        • Hostname
        • IpAddress
        • IsFirstRequest
        • IsHttps
        • IsPreview
        • IsStaging
        • IsLive
        • NodeTrail
        • PortalId
        • PortalName
        • ProjectId
        • ProjectName
        • ProjectVersion
        • Setting
        • UrlPath
      • Files
        • FileName
        • FileSize
        • FileUrl
        • MimeType
      • Lists
        • Distinct
        • IsNewRow
        • IsOnRow
        • List
        • NameOf
        • RowId
      • Math
        • Abs
        • Ceiling
        • Cos
        • Distance
        • Exp
        • Floor
        • Log
        • Log10
        • Pi
        • Pow
        • Random
        • Round
        • Sin
        • Sqrt
        • ToNumber
      • Security
        • AesDecrypt
        • AesEncrypt
        • AesIv
        • AesKey
        • CreateJsonWebTokenH256
        • HmacSha256
        • Md5
        • Password
        • PasswordStrength
        • Pbkdf2
        • Sha1
        • Sha256
        • Totp
      • Text
        • AsText
        • Base32ToText
        • Base64ToText
        • CompareFuzzy
        • Concat
        • Contains
        • FormatDate
        • FormatDuration
        • FormatNumber
        • Guid
        • HexToText
        • HtmlAttributeEncode
        • HtmlEncode
        • IndexOf
        • JavascriptEncode
        • JsonEncode
        • Length
        • Padl
        • Padr
        • RegExIsMatch
        • RegExMatches
        • RegExReplace
        • Replace
        • Split
        • StringPart
        • SubString
        • ToBase32
        • ToBase64
        • ToBase64Url
        • ToHex
        • ToLower
        • ToRichText
        • ToString
        • ToTitleCase
        • ToUpper
        • Trim
        • UrlDecode
        • UrlEncode
        • XmlAttributeEncode
        • XmlEncode
        • XPath
        • XPathList
        • XPathNumber
      • Validation
        • HasValue
        • IsEmpty
        • IsKnown
        • IsUnknown
        • IsValidBankaccount
        • IsValidBSN
        • IsValidBTW
        • IsValidEmailAddress
        • IsValidIBAN
        • IsValidPhonenumber
        • IsValidURL
      • Localization
        • AvailableLanguages
        • CurrentLanguage
        • CurrentTimezone
        • LanguageStrategy
        • Languages in WEM
    • Keywords
      • Contains
      • Concepts
        • Ancestor of
        • Child of
        • Concept
        • Descendant of
        • Overlaps
        • Range of
        • Parent of
        • Contains
      • Environment
        • ApplicationRoot
        • Platform
      • Lists
        • In
        • Of
        • Where
        • Contains
        • All
      • Logic
        • And
        • Not
        • Or
        • Choose
        • If Then Else
      • Mobile
        • BatteryLife
        • BuildVersion
        • ConnectivityTypes
        • DeviceId
        • DeviceName
        • IsDevelopmentBuild
        • IsDistributionBuild
      • Text
        • Contains
        • Ends with
        • NewLine
        • Starts with
    • Operators
      • Addition +
      • Division /
      • Equality =
      • Equality-strong ==
      • Greater-than >
      • Greater-than-or-equal >=
      • If-unknown ?
      • Inversion -
      • Less-than <
      • Less-than-or-equal <=
      • Logical-and &, and
      • Logical-not !, not
      • Logical-or |, or
      • Modulo %
      • Multiplication *
      • Power ^
      • Subtraction -
      • Unequality <>
    • Data Types
      • Text
      • Number
      • Yes / No (Boolean)
      • Date Time
      • Duration
      • File
      • Rich Text
      • Concept
      • Conceptset
      • Reference
    • SQL Compatibility
      • Functions
      • Keywords
      • Operators
    • Content Security Policy
    • WEMScript for Custom HTML
    • WEM Widgets
      • WEM Widget Structure
      • WEMScript for Widgets
      • Widget Editor
      • Content Placeholder
    • WMT
      • File Structure
      • Basic Functional Template
      • Styling
      • Font Icons
      • Reference
        • Breadcrumb
        • Button Bar Buttons
        • Common Scripts
        • Common Styles
        • Conditional
        • Content
        • CSP
        • CSP Nonce
        • Expression
        • Hidden Fields
        • Language Select
        • Navigation
        • Node ID
        • Node Name
        • Placeholder
        • Placeholder Conditional
        • Startup Scripts
        • Template Fragment
        • Uses
    • Regression Test Framework
      • WEM Test Script
  • Tutorials
    • Tutorials
      • Making a Change Log
      • Placeholders for end-users
    • First Application
      • Expand First Application
    • Video Tutorials
      • By Partners
      • Security
    • Building Widgets
      • Basics
        • 1. Introduction
        • 2. Hello, World!
        • 3. General
        • 4. Properties
        • 5. Events
        • 6. Styling
        • 7. View State
        • 8. Resources
        • 9. Placeholders
        • 10. Template Editor Script
        • 11. Global Scope
        • 12. Risks and Responsibilities
        • 13. Conclusion
      • In-depth
        • 1. Introduction
        • 2. Platform Availability
        • 3. Development Workflow
        • 4. Properties
        • 5. View state
          • 1. Runtime.viewState
          • 2. sessionStorage
          • 3. Summary
        • 6. Styling
        • 7. Events
          • 1. Navigation
          • 2. Row position
      • WEMscript
        • 1. Introduction
        • 2. Variables
        • 3. Properties
        • 4. OutputId()
        • 5. Register Input - Required
        • 6. Encoding
        • 7. Script Block - Introduction
        • 8. Types
          • 1. Boolean
          • 2. Concept
          • 3. ConceptSet
          • 4. Datetime
          • 5. Duration
          • 6. File
          • 7. Number
          • 8. Richtext
          • 9. Text
        • 9. Script Block - Global Scope
        • 10. Script Block - ES Modules
        • 11. CSS - attachShadow
      • Examples
  • Tips and Tricks
    • Tips and Tricks
      • Keyboard Shortcuts
      • Video's in WEM
      • Extracting text from File
    • Custom Hostnames
    • FAQ
    • Expressions
      • Order of Operators
    • Processes
      • Email Process
      • Tips for creating PDF's
      • ZIP Archive Process Node
    • Concepts
      • Concepts and Runtime
    • Working with data
      • The Power of the Calculated Field
      • Consuming your OData source with Excel 2016
      • Expose your data via OData
      • Using OData to transfer data between runtimes
      • WEM Storage Options
    • Integration
      • Integrating external systems
      • Json
      • Single Sign-on
      • Office365 Integration
    • Performance
      • Performance Tips
      • Performance Profiler
      • Template Performance Profiler
      • The Split Loop
    • Security
      • 2FA with TOTP
      • Blacklist or whitelist IP addresses
    • Widgets
      • Advanced Charts
        • Boxplot Chart
        • Brush Chart
        • Bubble Chart
        • Candlestick Chart
        • Card with Chart
        • Effect Scatter Chart
        • Heat Map
        • Line, Area and Bar Chart
        • Map-Bar Morph
        • Mix Time Line Chart
        • Nested Pie Chart
        • Polar Area Chart
        • Polar Bar Chart
        • Profit Chart
        • Radial Bar Chart
        • Radial Bar Gauge
        • Range Bar Chart
        • Rosetype Pie Chart
        • Sankey Energy Chart
        • Scatter Chart
        • Scatter-Aggregate-Bar Chart
        • Stacked Columns Chart
        • Stepline Chart
        • Treemap
      • Advanced Input
        • Color Picker
        • Conceptset Image Selector
        • Google maps locator
        • Multi select input button
        • MultiFile Upload
        • On/Off switch
        • Process Arrow Steps
        • Rate
        • Rating view
        • Single select input button
        • Slider
        • Tree
      • Template Actions
        • Follow exit
      • Global widgets
        • Agenda
        • Audio Player
        • Calendar
        • Draw Signature
        • Grid Widget
        • Image capture
        • Kanban Board
        • Path
        • Progress Bar
        • reCAPTCHA
        • Timeline
      • Document widgets
        • Json Viewer
        • PDF Viewer
    • Various
    • Go to MyWEM
Powered by GitBook
On this page
  • Form
  • Text form item
  • Numeric Form Item
  • Concept Form Item
  • Boolean Form Item
  • Date Form Item
  • Auto completion
  • Browser
  • Data model

Was this helpful?

Export as PDF
  1. Template Editor
  2. Interaction

Form

PreviousInteractionNextValidation

Last updated 3 months ago

Was this helpful?

Form

The form is an important part of a interaction page which lets you add and edit your data. There are two ways to add a form to your canvas. The most simple way is to drag the form to the canvas. Another way is to drag a data field to your canvas (without first creating the empty form), and select "Create form". When you add a Form to your template, a grey box with text appears, for now this is still an empty form. You can add content by dragging fields or a complete list to the form.

Form Items

Form items is what makes a form useful and what you use to get information for specific fields in your data model from user interaction. You can see a few different types of fields being used in the image above. Every data type has their own form item properties and appearance settings with different visual results.

Here are the options most form items have in common:

Property
Description

Label

Lets you change the text in front of the input field. It uses the name of the datamodel field as default label.

Visible when

This is a boolean expressions that lets you hide the Form item.

Behavior Required

Makes this field a required field you have to fill in before leaving this page. You can overwrite this by using the ignore user input option on an exit in your flowchart.

On Change

Changes what happens when the content in a field changes.

  • Refresh screen Updates the page and implements changes caused by an edit. Like filters that depend on a in form item.

  • Execute flowchart Executes a chosen flowchart upon a change.

  • Do nothing

Appearance Display as

The text form item has three different appearance options:

  • Single line Like First Name in the image. A single line input field.

  • Multi line This changes the input field to a multi line input box.

  • Password A single field input box that is shows text as masking dots.

Input mode

The input mode changes how the input text is shown in the runtime.

  • Default A plain input field where a user can input a text.

  • Plain text This changes the input field to a label showing the content as text.

  • Read-only An input field that shows content of the data field but can not be edited but can be selected.

  • Disabled input An input field that shows content of the data field but any interaction with the field is disabled and it shows a disabled icon on hover.

Input mode when

Expression field for when a the selected input mode should be activated. When false default mode is used.

Width

Width of the field in pixels or implicit.

Help text

Input fields also supports a help text that is shown below the field. See image below.

Text form item

When a text field is added to a form it has a few field specific properties:

Property
Description

Hint text

implicit text or expression field for the hint text that is shown in an empty input field. (image Help, Hint, en Postfix example above)

Postfix text

implicit text or expression field for a postfix text that is added at the end of the input field. (image Help, Hint, en Postfix example above)

Auto completion (browser)

Enable browser level auto completion, this will open a extra property section you can find more at the end of this page.

Auto completion (data model)

Enable auto completion on the based on a list in your project. This will open a overly prompting you to select a list to base the auto completion on, more about that at the end of this page.

Numeric Form Item

This is a field that behaves similarly as a text field but only allows numbers as input.

The numeric input field also supports a help text that is shown below the field, a hint text that is shown in an empty input field and a postfix text that is added at the end of the input field. You can see what these look like in the image: help, hint and postfix example.

Property
Description

Behavior Number of decimals

Select the amount of decimals allowed to enter in this field. 0-100

Concept Form Item

Single select

A list of radio buttons or a dropdown field of options in a concept set.

Property
Description

Ontology query

Filter expression

Expression field for the use of a filter on your concept set to filter out specific options.

Appearance Display as

  • Dropdown

  • Radio buttons (vertical)

  • Radio buttons (horizontal)

Option Text

An expression that lets you set the label used for the options. Default uses the name of the concept for that option.

Default text (Dropdown)

The text displayed when no option is selected. Default or empty selects the first option.

Column count (Vertical)

Amount of columns used for the options. It will try to keep the same amount of options in each column.

Multi Select:

A list of concepts from a concept set with multi select boxes.

Property
Description

Ontology query

Filter expression

Expression field for the use of a filter on your concept set to filter out specific options.

Option Text

An expression that lets you set the label used for the options. Default uses the name of the concept for that option.

Checkbox orientation

Column count (Vertical)

Amount of columns used for the options. It will try to keep the same amount of options in each column.

Boolean Form Item

The Boolean form item has the following appearance options:

Appearance Display as

  • Dropdown

  • Radio buttons (vertical)

  • Radio buttons (horizontal)

Label text (Yes)

The label for the Yes option, this can be explicit or an expression.

Label text (no)

The label for the No option, this can be explicit or an expression.

Help text

A text shown below the options

Date Form Item

The Date form item has the following options:

Appearance Display as

  • Calendar button

  • Calendar button & text field

  • Dropdown fields

  • Single text field

  • Multiple text fields

You will find what these options look like in the image below with the help text option used to represent the chosen option.

Include time

Adds a time input field

Translate to local time

Translate the time to the local time set on the device of the user.

Help text

A text shown below the input field in the image below it is used to name the display as property.

Auto completion

Auto-completion options provide suggestions to users as they fill in specific fields in a web browser. There are two types of auto-completions available: one based on the browser's suggestions and another based on a list from your data model. Fields that are not saved in a database, known as transient fields, can use both types of auto-completion. However, fields directly sourced from a data model list can only utilize the browser's auto-completion. The available browser auto-completion options depend on the "display as" property. For fields displayed as a single line, both types of auto-completion are supported. Multi-line fields do not support auto-completion, and for password fields, only auto-completion types related to passwords are allowed.

Disable auto-completion

Depending on your settings browsers will try to add auto completion options when it recognizes a field is used for similar content.

You can prevent this by setting the auto-completion to browser and using the 'General' option with the 'Type' setting off.

Browser

This feature enables the use of the browser's built-in auto-completion functionality for input fields. By specifying the auto-completion type in the field properties, users can benefit from suggestions and auto-fill options provided by their browser, enhancing the efficiency and user experience of form filling. The implementation of this feature heavily depends on the browser being used and may be treated as suggestions in some cases. When the browser setting is enabled, two new properties become available for configuration.

The first property is "Auto completion type," where you can select the category for auto completion in this field. Most browsers interpret "General" as a tag to remember the specific field, displaying previous values whenever the field is accessed. The "General" option also allows you to exclude the field from auto completion, which can be useful for security code fields, for example.

When any other auto completion type is selected, a more specific property called "Type" becomes available. Here, you can choose the actual completion type for the field, such as a name or an address line.

Additionally, there are options for an Autocomplete prefix and a contact prefix. The Autocomplete prefix allows you to specify whether the field is for billing information, shipping, or not specific. The contact prefix is specifically intended for contact fields and enables you to indicate the relation with the contact, such as home, work, or mobile information.

Data model

To be able to use this option make a session field or transient field in the form to fill in for the user and save the data after the fields are filled. When the option auto completion (data model) option is chosen a overlay with your datamodel is opened. Here you select the database list used for the auto completion. This will add a extra section in the property pane called Auto completion (data model)

Properties

Property
Description

Auto selection first option

When this is toggled on the first suggestion is selected and can be filled in with enter. When its off you have to select the option before it can be filled in.

Source

This is the data list that should be used for the suggestions.

Suggestion text

Property for selecting the label text for the suggestions. This has to end with the text datatype.

Search mode

Choice between contains where the options only need to contain the text entry, or it has to start with the text entry.

Min characters

Amount of characters needed before suggestions are given.

Max suggestion

Maximum amount of suggestions given by your browser.

Check the on how to prevent validation for a cancel action.

Here you can add a ontology query to a concept form item. With this you can filter concepts depending on a query. Find out how: .

Here you can add a ontology query to a concept form item. With this you can filter concepts depending on a query. Find out how: .

Choose which way to orient the options. Top Vertical

Concept Queries
Concept Queries
Ignore User Input information
This is an empty form(grey box) with a form filled with form items below (inside the grey border).
The same form in the runtime as seen by users.
Help, Hint, and Postfix example.
a single select form item
Display options in the runtime.
Data Model Auto Completion