Principle:Langgenius Dify DataTransformation
| Knowledge Sources | Dify |
|---|---|
| Domains | Frontend, Data Processing |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Dify implements bidirectional data transformation between UI form structures and backend data models, providing a clean abstraction layer that decouples frontend component design from backend API schema.
Description
The utils/model-config.ts module contains the core transformation logic. The userInputsFormToPromptVariables function converts an array of polymorphic UserInputFormItem objects (where the item type is determined by which property key is present: text-input, paragraph, select, number, checkbox, file, file-list, json_object, or external_data_tool) into a normalized array of PromptVariable objects with consistent property names (key, name, type, required, options, max_length, default). The reverse function promptVariablesToUserInputsForm performs the inverse mapping, constructing the property-keyed form items from the flat prompt variable format.
This bidirectional transformation is essential because the backend stores prompt variables in a normalized format optimized for LLM execution, while the frontend uses a discriminated union format optimized for dynamic form rendering. Each form item type has different UI controls (text fields, dropdowns, file uploaders, checkboxes), and the polymorphic structure lets the form renderer select the appropriate component without explicit type switching.
The transformation layer also handles special cases such as dataset_query_variable flagging (marking which variable is used for knowledge base retrieval), external_data_tool integration (where the variable type is determined by the tool configuration), and hide flags for variables that should not be shown to end users. By centralizing these transformations, the codebase avoids scattered ad-hoc conversions and ensures that all paths between the backend schema and the UI form model pass through the same tested logic.
Usage
Use this principle when:
- Adding new variable types to the prompt configuration (e.g., new input controls or data types)
- Modifying the mapping between backend prompt variable format and frontend form items
- Implementing new configuration screens that need to read from or write to the backend model format
Theoretical Basis
This implements the Anti-Corruption Layer pattern from Domain-Driven Design, where a translation layer prevents the backend's data model from leaking into the frontend's UI model. The bidirectional mapping follows the Data Transfer Object (DTO) pattern, with explicit transformation functions serving as mappers between the two representations. The polymorphic form item structure uses Tagged Union discrimination (property presence as the type tag), a common TypeScript idiom for type-safe dynamic dispatch.