> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Common Component Property Types

> Reference for common property types used by YiDA components. Defines the data structures and value specifications for each property type, and works together with the common component APIs to read or set component properties in the action panel.

This document lists the common property types used by YiDA components. Use the following APIs to read or set the specified properties of a component in the action panel (see [Common Component APIs](/open/yida/api/yidaAPI#common-component-apis) for details):

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Get a component property value
export function getAttribute(){
  // Get the content property of the Text component and print it to the console
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

// Set a component property value
export function setAttribute(){
  // Set the maxLine property of the Text component
  this.$('text_kyz78exo').set('maxLine', 5);
}
```

## Basic Types

### I18n

Configuration for internationalized strings.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
inerface I18n {
  zh_CN: string;
  en_US: string;
  type: 'i18n';
}
```

## Form Basic Properties

### Behavior

Display state of a form control:

* NORMAL - Normal display.
* DISABLED - Disabled.
* READONLY - Read-only.
* HIDDEN - Hidden.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
type Behavior = 'NORMAL' | 'DISABLED' | 'READONLY' | 'HIDDEN';
```

### Size

Size of a form control.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
type Size = 'small' | 'medium' | 'large';
```

### LabelTipsTypes

Type of tip displayed next to the title of a form control.

* none - None.
* text - Text.
* render - Custom rendering.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
type LabelTipsTypes = 'none' | 'text' | 'render';
```

### Validation

Validation rules for a form control.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface Validation {
  type: 'required' | 'minValue' | 'maxValue' | 'minLength' | 'maxLength' | 'customValidate'; // Validation type
  message: string | I18n; // Error message
  param: number | (value: any) => boolean; // Validation parameter. When type is customValidate, this is the custom function.
}
```

## Component-Related Data Source Types

### DataSource

Option format for selection components such as dropdown, single-select, and multi-select.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface DataSource {
  text: string | I18n; // Display content
  value: string; // Submitted data
}
```

### CascadeDataSource

Option format for components with multi-level nested structures, such as cascading select.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface CascadeDataSource {
  label: string | I18n; // Display content
  value: string; // Submitted data
  chidren?: CascadeDataSource[]
}
```

### SliderDataSource

Data configuration for the image carousel component.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface SliderDataSource {
  src: string; // Carousel image URL
  title?: string | I18n; // Carousel title
  link?: string; // Redirect link when the image is clicked
}
```

### StepsDataSource

Data configuration for the steps component.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // Status of the current step
  customSwitcher?: boolean; // Whether to enable custom rendering
  customRender?: (item: StepsDataSource) => ReactNode; // Custom rendering function
  icon?: string; // Step icon
  percent?: number; // Progress percentage of the current step. A number between 1 and 100.
  disabled?: boolean; // Whether the step is disabled
}
```

### TimelineDataSource

Data configuration for the timeline component.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TimelineDataSource {
  title: string | I18n; // Title
  time: string; // Time
  icon?: string; // Icon to display
  state?: '' | 'process' | 'success' | 'error'; // Status of the current node
  timeLeft?: () => ReactNode; // Time display on the left
  doc?: () => ReactNode; // Custom timeline node. Takes precedence over the icon property.
  content?: () => ReactNode; // Custom content on the right
}
```

### TreeDataSource

Data configuration for the tree component.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TreeDataSource {
  key: string;
  label: string;
  children?: TreeDataSource[]; // Child nodes
}
```

### MenuDataSource

Data configuration for the menu component.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface MenuDataSource {
  label: string;
  key: string;
  chidlren?: MenuDataSource[]; // Child nodes
}
```

### SearchDataSource

Data configuration for the search box.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface SearchDataSource {
  label: string;
  value: string;
}
```

## Others

### TabItem

Configuration properties of a tab item.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TabItem {
  title: string; // Tab name
  primaryKey: string; // Unique identifier of the tab
  disabled?: boolean; // Whether the tab is disabled
  customKey？: string; // Custom key
}
```

### TableColumn

Column configuration of the Spreadsheet component.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TableColumn {
  dataKey: string; // Data field
  title: string | I18n; // Column header title
  width?: string; // Column width. Can be in px or %.
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Data type
  float?: '' | 'left' | 'right'; // Image floating (takes effect only in mobile card mode)
  imageProps?: React.CSSProperties; // Image style
  imageWrapProps?: React.CSSProperties; // Image container style
  imageOnClick?: (e: Event, column: number) => void; // Image click callback
  enumBadgeType?: '' | 'color' | 'background'; // Enum style
  enumData?: any; // Enum data
  editType?: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Edit format
  timeFormatter?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY'; // Time format
  align?: 'left' | 'center' | 'right'; // Alignment
  lock?: 'none' | 'left' | 'right'; // Column lock
  groupName?: string; // Group title
  message?: string; // User tip
  sortable?: boolean; // Whether the column is sortable
  highlight?: boolean; // Whether to highlight. Takes effect only in mobile card mode.
  hidden?: boolean; // Whether the column is hidden.
  resizable?: boolean; // Whether the column width can be adjusted. Must be used together with the event triggered when the column width is reset.
  titleRender?: (title: string) => ReactNode; // Custom title rendering
  render?: (value: any, index: number, rowData) => ReactNode; // Custom content rendering
  canEdit?: boolean; // Whether the column is editable
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // Custom rendering in edit state
  editProps?: any; // Edit configuration
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // Filter mode
}

```

### FilterConfig

Configuration of a filter item.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface FilterConfig {
  title: string; // Title
  id: string;
  fieldId: string;
  componentName: string;
  prevComponentName: string;
  colspan?: number;
  isAdvanced?: boolean;
}
```

### ScanCodeConfig

Scan mode configuration on the DingTalk client. The DingTalk client supports the following scan modes:

* barCode - Bar code.
* qrCode - QR code.
* all - All of the above.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // Whether the scan result can be modified
}
```

### UploadConfig

Image upload configuration for the Rich Text component.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface UploadConfig {
  inputName?: string; // The name attribute of the file input for upload. Defaults to file.
  actionUrl: string; // Upload endpoint
  formatResult?: (response: any) => any; // Response data processing
  errorCallback?: () => void; // Error callback
  progressCallback?: () => void; // Upload progress callback
  headers?: Record<string, string>; // Request header configuration for image upload
}
```