Single-Line Text

The Single-line text component can capture numeric input such as ID card numbers, phone numbers, student IDs, employee IDs, bank card numbers, and membership numbers. It can also accept plain text. Component basics

For component attributes, usage, and examples, click here.

Basic Features

Supports QR code scanning, character counter, one-click clear, and advanced page redirection.

QR Code Scanning

Scan Mode

Call DingTalk’s scanning feature to quickly capture QR code or barcode data into the Single-line text component. Commonly used for scenarios that require scan-based input, such as device inspection and asset inventory.

Scan mode Result:

Note: This mode is supported only in the DingTalk mobile app. When enabled, tapping the scan button in an unsupported environment displays a prompt asking the user to open it in DingTalk. This does not affect basic component usage.

Scan Type

Supported scan types: All, QR Code only, Barcode only. All: A single control can recognize both QR Code and Barcode. Supports selecting an image from the Album for recognition.

Allow Modifying Scan Results

Scanned information can be modified by default. If the option to disallow modifying scan results is enabled, the scan output cannot be edited. Configure it as shown below:

Character Counter

After enabling the character counter, set the maximum character length for the component. Exceeding the limit triggers a validation prompt.

Result:

One-Click Clear

After selecting the option to display the clear button, users can tap it on the access or preview page to instantly clear any incorrect input.

Result:

Advanced Usage

Information obtained by scanning a QR code or barcode can be concatenated into a link to trigger a page redirect. For example, this applies to scenarios such as scanning to view product details or scanning to place a food order. Result:

Path: Single-line text >> Premium >> Create an action and configure a fixed URL. Example: When writing JS for the new action, configure a fixed URL. When the scan succeeds, the captured information is passed as a URL parameter to redirect to the preset fixed URL for viewing details, enabling automatic page redirection after a successful scan. Reference configuration:

Note: Update the highlighted section in the code to match the unique identifier shown on the right. Unique identifier: Similar to an ID card for each control. Each control has a distinct unique identifier.

Reference JS code you can paste and use:

export function onScanCodeSuccess(text) {
  const fieldId = 'editorField_klbopk6r';
  // If the text does not start with http or https, do not display the text below.
  if (!/^http(s)/.test(text)) {
    this.$(fieldId).setValue(null);
    return text;
  }
  const html = `<div><span style="color: #0089ff;"><a style="color: #0089ff;" href="${text}" target="_blank">Click to view the traceability record</a></span></div>`;
  // Assign the value
  this.$(fieldId).setValue(html);
  // Note: the onScanCodeSuccess event must return text; otherwise, the value will not be populated correctly.
  return text;
}

Getting Started

Quick Start

Form Management

Workflow Design

Report Design

Aggregate Table Design

Portal Design

Custom Pages

Integration & Automation

Cool App

App Management

Platform Management

Internationalization

YiDA Dedicated

Developer Features

Basic Features

QR Code Scanning

Scan Mode

Scan Type

Allow Modifying Scan Results

Character Counter

One-Click Clear

Advanced Usage

​Basic Features

​QR Code Scanning

​Scan Mode

​Scan Type

​Allow Modifying Scan Results

​Character Counter

​One-Click Clear

​Advanced Usage

Basic Features

QR Code Scanning

Scan Mode

Scan Type

Allow Modifying Scan Results

Character Counter

One-Click Clear

Advanced Usage