Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Settings
  • Value
  • Error
  • Update on Keypress
  • Label
  • Placeholder Text
  • Helper Text
  • Format Number
  • Input Data Type
  • Input Mode
  • Decimal Places
  • Thousand separator
  • Autocomplete
  • Min Date
  • Max Date
  • Max Length
  • Multiline
  • Auto Focus
  • Select Text on Focus
  • Tab Index
  • Appearance
  • Adornment
  • Event Handlers

Was this helpful?

Export as PDF
  1. Library
  2. UI components

Text edit

PreviousTextNextView container

Last updated 3 months ago

Was this helpful?

The UI component Text Edit allows you to receive text input from the end-user. You can bind the input to a Custom App Variable or to a Property of a Data Source. This binding is two-way: The content of the variable or property will be displayed in the Text Edit, and all edits done by the end-user will be written back to the property.

You can see an example setup of the Text Edit component in the left menu of the UI Components App in our ! You can try the Text Edit, as well as access the setup in Appfarm Create. If you do not have access, you can register .

Settings

Here are some of the properties in Appfarm Create which are custom for Text Edit:

Value

The data source property or variable that the user input is bound to. This can be an App Variable, a Runtime Only Object Class property, or a Database Connected Object Class property.

If validation of the input is important, it is recommended to use a Runtime Only property or variable here, so that input validation can be performed before persisting input to the database.

Error

Define an event where the component will enter an error state. This can be through binding to a Data Source Property, setting up a , or a . This can be used to alert the user of a required field when filling in a form or to alert the user that some of their input data is not correct.

Update on Keypress

If this box is checked, the property defined in Value will be updated every time the user presses a key on their keyboard. If changes to the property persist straight to the database, or has a lot of dependent logic, this setting may have a negative performance impact.

Label

A built-in label that tells the user what the Text Edit will be used for. This could be First Name, Email Address, or Postal Address, for instance. Labels are always visible to the user.

Placeholder Text

This is a piece of text that appears whenever the Text Input is blank. It can be used to describe the preferred input format or guide the user to start typing, for instance. This text disappears when the user begins to type.

Helper Text

This serves a similar function to Placeholder Text, but it is always visible regardless of the user's input. This can be used if input format is important, for example in a phone number, to give the end user further guidance. Helper text appears below the input text.

Format Number

Input Data Type

This specifies the data type of the input. This allows Appfarm Create to automatically perform input formatting or input validation for you.

  • Text: The default input data type. Treats the input as plain text.

  • Number: This will only allow numerical input using the characters 0-9.

  • Password: This will treat the input as a password, and automatically censor the characters entered.

  • Email: This will treat the input as an email address.

  • Phone Number: This will treat the input as a phone number.

  • Date: This will treat the input as a date. The user can input a date using the default format dd.mm.yyyy

  • Time: This will treat the input as a time. The user can input a time using the default format hh:mm

  • Date & Time: This will treat the input as a datetime. The user can input both a date and a time, using the default formats dd.mm.yyyy and hh:mm

  • Search: This will treat the input as a search term. This can be used to find items matching a search term in a database, for instance.

Input Mode

This tells Appfarm Create which input mechanism to use for this Text Edit. On mobile devices, this may change the keyboard provided to the user. It is important to consider that inputs that require an input type should make use of the Input Data Type property instead.

  • None

  • Text: Standard input keyboard

  • Decimal: Allows the user to enter float numerical values, for instance 1.08 or 3,14. The decimal separator will be determined by the user's locale.

  • Numeric: Shows a numeric input keyboard.

  • Phone Number: Allows for the digits 0-9, the * character and the # character.

  • Search: A virtual keyboard optimised for search input. For instance, the return key can be labelled "Search" instead.

  • Email: A virtual keyboard optimised for entering email addresses. Optimisations can include easier access to the @ key

  • URL: A virtual keyboard optimised for entering a URL. This can make the / key more accessible, for instance.

Decimal Places

Visible when Format Number is enabled.

The number of decimals to use. Possible values are from 0 to 20.

Thousand separator

Visible when Format Number is enabled.

Enable to show the thousand separator.

Autocomplete

Min Date

Only available for the Date and Date & Time input data types. Specifies the earliest date that the input will allow.

Max Date

Only available for the Date and Date & Time input data types. Specifies the latest date that the input will allow.

Max Length

Not available for the Number, Date, Time or Date & Time input data types. Specifies the maximum number of characters that the input will allow.

Multiline

Only available for the Text input data type. Enabling this property will provide the user with a multi-line text area to input plaintext. This property can be useful for situations where longer text inputs are expected, such as a Description field. Having the Multiline enabled reveals two new options: Rows and Max Rows. Rows is the default (and minimum) number of lines that are displayed, and hence also serve as the default height of the Text Input. Max Rows may be used to define the maximum number of rows to be displayed. The user may enter longer text, resulting in a scroll inside the Text Edit.

Auto Focus

When selected, this Text Edit will be focused automatically when the screen is rendered. Useful if you want to guide the user directly to the place to start typing.

Select Text on Focus

When selected, all text contained within the Text Edit component will be highlighted when the Text Edit gains focus.

Tab Index

Users can use the Tab key to navigate between inputs and components on a screen. This property tells Appfarm Create which index to bind to the current Text Edit. This value should only be given when you want to override the default tab index. Using a tab index of -1 will remove the Text Edit from the tab index.

Appearance

Variant

Appfarm Create provides three different 'variants' of the Text Edit component. These are all available to view in the Appfarm Showroom.

  • Standard

  • Outlined

  • Filled

Disable Underline

When selected, the Text Edit component will not have a line underneath.

Margin

Three choices are available for this property. These define the margin style between Text Edit components.

  • Normal

  • Dense

  • None

Adornment

Adds an adornment to the Text Edit component. This can be in the form of an Icon Button, Icon, or Text. Adornments can be positioned at the start or the end of the Text Edit component. For instance, if a Text Edit component is used as a search field, an Icon Button adornment could be used with the magnifying glass icon.

Icon Button adornments can be linked to an Event Handler, described below.

Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. The following Event Handlers are available for the Text Edit component:

  • On Focus: This Event Handler will run an action when the Text Edit component gains focus.

  • On Lost Focus: This Event Handler will run an action when the Text Edit component loses focus.

  • On Enter: This Event Handler will run an action when the user presses the <Return> key. Note: not available when Multiline is enabled.

  • On Value Change: This Event Handler will run an action when a change is detected in the data source bound to the Text Edit component. If the Update on Keypress value is selected, the On Value Change Event Handler will run each time a key is pressed.

  • On Adornment Click: This Event Handler is only available when an adornment is added to the Text Edit component, and when this adornment is an Icon Button variant. This Event Handler will run an action when the adornment icon button is clicked.

Will format the input according to the active language's set in . Also enables decimal and thousand separators.

Behaviour may differ between browsers, please refer to for full browser support and documentation.

Behaviour may differ between browsers, please refer to for full browser support and documentation.

Provides guidance for automated assistance in filling out field values. Autocomplete is turned on by default, but without further guidance on which data type is expected. Autocomplete can be turned off by typing off in this field. Please refer to for a list of accepted values and expected behaviour.

Showroom
here
Condition
JavaScript function
this link
this link
this link
Internationalization
Number format