Heisenware Docs
Go to websiteGet a demo
  • 👋Welcome
  • Getting started
  • Release Notes
    • v84 - Get in the flow
    • v83 - Beauty treatment
    • v82 — Fully distributed
    • v81 — Removing old cruft
    • v80 — Chicks on fire
    • v79 — Nothing is forever
    • v78 — Keep moving
    • v77 — More intelligence
    • v76 — Well cooked
  • Build & Deploy Apps
    • Overview
    • Flow Builder
      • Nodes (Functions)
        • Inputs
        • Trigger
        • Output
      • Function Extensions
        • Modifier
        • Filter
        • Error handler
        • Memorizer
      • Objects & Instances
      • Utilities
        • Basic Functions
        • PDF functions
        • Circular buffer
        • Timer
        • Counter
    • Integrations
      • Protocol Connectors
        • GraphQL
        • HTTP/REST
        • MQTT
        • OPC UA
          • Heidenhain PLCs with OPC UA
        • RS-232/485
        • Siemens S7
      • Data Connectors
        • File
        • Relational Database
        • Time Series Database (WIP)
      • API Connectors
        • OGC SensorThings API
        • Operating System
        • Zebra RFID IoT Connector
      • Agent / (Edge Connector)
      • Calling Custom Code
    • UI Builder
      • Input Widgets
        • Form
        • File Upload
        • Photo
        • Signature
        • Barcode / QR-Code (WIP)
        • Document Scan (WIP)
      • Display Widgets
        • Chart
        • Chat
        • Circular Gauge
        • Data Grid
        • Linear Gauge
        • Map
        • Media View
        • Progress Bar
        • Sparkline
        • Status Lamp
        • Toast
        • Value Box
        • Kanban Board
        • Data Tiles
        • Pie Chart
        • Sankey
      • Buttons
      • Text Box
      • Images
      • Icons
    • Communication Interfaces
      • Email Notifications
      • OPC UA Server
    • Data & File Storage
      • Internal InfluxDB
      • Internal PostgreSQL
      • File Server
    • App Appearance
      • Pages
      • In-App Navigation
      • Screens & Devices
      • Theming
    • Simulation & Testing
      • Simulating Events
      • Simulating Data
    • PDF Templates
    • RAG-based Chatbot
    • Deployment
  • Manage Apps
    • Overview
    • Manage Apps
      • General Settings
      • Users and Access
      • Distribution & Versioning
    • Manage Integrations
    • Manage Account
      • Account Structure
      • Members
      • Workspaces
  • TUTORIALS
    • Build Your First Heisenware App
  • Connect Heidenhain CNC with OPC UA Support
  • Related links
    • Website
    • Privacy policy
    • Imprint
Powered by GitBook
On this page
  • Settings
  • Style Settings
  • Data Settings
  • Properties
  • Passing data to the backend
  • Setting actions from the backend
  • Commands
  1. Build & Deploy Apps
  2. UI Builder
  3. Input Widgets

Form

Last updated 13 days ago

The form is a versatile widget for the input of a wide range of data types and formats.

It can build forms with any number of fields and collect the data as entered by the app users.

Settings

Style Settings

Column count:

The Column Count can be modified for each screen type, so different screens can have a different number of columns.

The other style settings are automatically set on all screens at once for consistency.

Label Mode: choose between 4 style options for the field labels.

Label Location: determines the position of the label, but only for the "Outside" label mode.

Initially ReadOnly: see readOnly property

Data Settings

Editor Types

Form fields come in 16 different types, each with different accepted inputs.

Editor Type
Data type

Text Box

string

Select Box

string

Number Box

number

Check Box

bool

Password

string

Tag Box

array

Date/Time Select

date

Color Select

number (hexadecimal)

Location Select

geojson

Radio Group

string

Text Area

string

Slider

number

Switch

bool

Some types of field inputs have extra options such as an option list or a default value.

Each field can be set as required and show an error message when it’s empty.

Groups

When a form is created, the Data Settings tab has a default Group with a default text field.

Fields can only be created inside of a group.

If theGroup Label is filled, it will show as a title on the app UI.

Tabs

Each group has an option called Tab View.

Make sure to label groups in a tab view. Unlabeled groups will appear as empty tabs.

Properties

Passing data to the backend

From FormData

The default option when connecting the form to an input, it reads the form data as specified in the options.

From ValidationResult

Returns the result of validation in this format:

{"isValid":true
"status":"valid"
"complete":NULL
"brokenRules":[]}

{"isValid":false
"status":"invalid"
"complete":NULL
"brokenRules":[
    0:{
    "index":0
    "isValid":false
    "message":"Check ist ein Pflichtfeld"}
    ]
}

The isValid variable can be used, for example, to prevent the app user from submitting a form without having completed the required field.

Setting actions from the backend

Set Options

Some types of form fields have a list of values to select from. One way to set these options is using the set options property. Link an output to form and then select the “set options” property.

Compared to writing the options in the Data Settings, this method allows to set the options dynamically from the logic board.

Commands

Call AutoFill

Automatically fills a specified form field with a value passed to the function.

Call Validate

The call validate property checks whether the information in the form is valid (required fields are filled, the inputs are in the correct formats etc.). After triggering a function with this property, the results can be accessed with the from validationResult property.

Call Clear

The call clear property clears all the form inputs when triggered.

Call ReadOnly

You can call the readOnly property to display the form data in a cleaner format and disable the editing.

This property works like the "toggle" property of buttons. The output or modifier that calls the property needs to be set to either "true" or "false" to activate and deactivate it.

The form widget has a set of unique when linked to a function.

properties
A form with different editor types
A Tab View with three tabs
The input format from the FormData property
Example of an echo function used to set options
Frontend view
Example of an echo function used to call autoFill
Frontend view
A trigger function set to trigger Call Validate
A Call Validate function is run and a required field is empty
A form in ReadOnly mode