釘釘宜搭開發助手

---

name: yida-dev description: 釘釘宜搭低程式碼開發助手。用於建立表單和自定義頁面、編寫 JS 動作面板、使用 JS-API、配置資料來源、設計流程自動化。適用於宜搭表單開發、JS 程式碼除錯、API 整合等場景。 trigger_phrases: - 宜搭 - yida - 釘釘表單 - 低程式碼開發 - 宜搭JS - 宜搭開發

---

⚠️ 重要：宜搭開發模式

與傳統前端不同，宜搭有獨特的開發模式：

1. 頁面不是程式碼寫的 - 頁面通過宜搭視覺化拖拽建立，不是 JSX/HTML 宣告
2. 不要寫元件宣告程式碼 - ❌ 禁止 import Button、❌ 禁止 const Page = () => {...}
3. 只有 JS 動作面板 - 宜搭的 JS 程式碼是"動作面板"，只能寫函式，不能寫元件
4. 元件通過 fieldId 引用 - 使用 this.$('textField_xxx') 操作已存在的元件

元件 fieldId 命名規範

宜搭元件的 fieldId 格式為：元件型別_隨機字尾

元件型別	fieldId 示例
單行文本	textField_m2iqeyip
多行文本/文本域	textareaField_lu7rqky5
單選	radioField_m2l8tqxr
流水號	serialNumberField_lr76bpi4
數字	numberField_mbhl6h58
下拉選擇	selectField_mbhjt4zb
日期	dateField_ll0bcdf1
附件	attachmentField_mbhjt4zd
圖片	imageField_mbhjt4zl
人員選擇	employeeField_mbhjt4zr
人員多選	employeeField_xxx + multiple: true
部門選擇	departmentSelectField_lu7qx4i5
子表單/明細表	tableField_mbhjt4zy
地址	addressField_mbhjt508
關聯表單	associationFormField_mbhjt50s
區塊	pageSection_m2vthls5
按鈕	button_invoiceAdd
發票元件	ccInvoiceFieldComponentView_m2vv4aux
多列布局	columnsLayout_m2k6t8hx
標籤頁	tabsLayout_lkcfmpjv

常見開發模式

條件顯示

• 元件屬性 → 高階 → 是否渲染 → 繫結變數 state.sta
• 或 JS 設定：this.$('fieldId').setBehavior('HIDDEN')

事件函式命名

• export function onChange({ value }) { } - 值變化事件
• export function didMount() { } - 頁面載入完成

setTimeout 延遲

宜搭元件 onChange 事件中修改狀態需要延遲：

export function onChange({ value }) {
  setTimeout(() => {
    this.setState({ sta: value === '價款合同' })
  }, 200)
}

隱藏欄位

元件屬性中設定 behavior: "HIDDEN" 可隱藏欄位（可用於資料傳遞）

只讀欄位

元件屬性中設定 behavior: "READONLY" 可設為只讀

公式欄位

在元件屬性中設定 valueType: "formula" + formula: "#{textField_xxx}"

{
  "valueType": "formula",
  "formula": "CONCATENATE(\"XMBH\",TEXT(TODAY(),\"yyMMdd\"),MID(TEXT(TIMESTAMP(NOW())),9,5))"
}

TableField 事件

新增行時獲取行數：

export function onAddClick(newGroupId) {
  const count = this.$('tableField_xxx').getValue().length
  this.$('textField_count').setValue(count + '條')
}

TableField onChange 計算不重複值

遍歷子表單行，計算某列的不重複值數量：

export function onChange({ value, extra }) {
  const subFormInst = this.$('tableField_xxx')
  const items = subFormInst.getItems()
  let distinctNum = []
  items.forEach(item => {
    const rowData = subFormInst.getItemValue(item)
    if (rowData['textField_col'] && !distinctNum.includes(rowData['textField_col'])) {
      distinctNum.push(rowData['textField_col'])
    }
  })
  this.$('numberField_count').setValue(distinctNum.length)
}

EmployeeField onChange

人員選擇變化時獲取人員資訊：

export function onChange({ value }) {
  // value 是人員物件 { name, userId, ... }
  this.$('textField_name').setValue(value.name)
}

PageSection 區塊

用於分組顯示，有標題頭：

{
  "componentName": "PageSection",
  "props": {
    "title": { "zh_CN": "基本資訊" },
    "behavior": "NORMAL",  // 或 "HIDDEN" 隱藏整個區塊
    "showHeader": true
  }
}

關聯表單資料填充

選擇關聯表單時自動填充其他欄位：

{
  "dataFillingRules": [
    { "sourceType": "SelectField", "targetType": "TextField", "source": "selectField_src", "target": "textField_target" }
  ]
}

聯動欄位

設定 valueType: "linkage" + linkage 屬性從其他表單獲取資料

SUM 彙總公式

彙總子表單某列：

{
  "valueType": "formula",
  "formula": "SUM(#{numberField_column})"
}

RadioField 聯動

單選切換時顯示/隱藏欄位（配置選項的聯動規則）

onBlur 事件

失焦時執行校驗（如手機號驗證）：

export function onBlur() {
  let phone = this.$('textField_xxx').getValue()
  if (!phone) return
  if (!this.isPhoneNumber(phone)) {
    this.utils.toast({ title: '請輸入正確的手機號', type: 'warning' })
    this.$('textField_xxx').setValue('')
  }
}

export function isPhoneNumber(input) {
  return /^1\d{10}$/.test(input.replace(/\D/g, ''))
}

NumberField 校驗

設定 minValue 最小值：

{ "validation": [{ "type": "minValue", "param": "0" }] }

元件屬性參考

SelectField 下拉選擇

屬性	說明	型別	預設值
dataSource	選項資料	DataSource[]	[]
onChange	值變化事件	(value: string) => void	-
showSearch	展開後能搜尋	boolean	true
filterLocal	本地過濾	boolean	-
mode	single/multi	string	single
hasClear	清除按鈕	boolean	true
autoWidth	選單對齊	boolean	true

TableField 明細表

屬性	說明	型別	預設值
onChange	值變化事件	({value, extra}) => void	-
onAddClick	新增行事件	(newGroupId) => void	-
onDelClick	刪除行事件	(groupId, item) => void	-
maxItems	最大條數	number	50
addButtonPosition	新增位置	'top' | 'bottom'	bottom
layoutSetting.layout	排列方式	'TILED' | 'TABLE'	TABLE
layoutSetting.theme	主題	'zebra' | 'split' | 'border'	split
showIndex	顯示序號	boolean	true

TableField JS 操作

const table = this.$('tableField_xxx')
table.getValue()           // 獲取所有行資料
table.getItems()           // 獲取行例項陣列
table.getItemValue(item)   // 獲取某行資料
table.addItem()            // 新增一行
table.removeItem(item)    // 刪除一行

NumberField

屬性	說明	型別	預設值
precision	小數位數 (0-20)	number	0
thousandsSeparators	千分位	boolean	false
innerAfter	單位	string	-
innerBefore	字首	string	-

RadioField

屬性	說明	型別	預設值
dataSource	選項	DataSource[]	[]
onChange	值變化	(value) => void	-
shape	形狀	'default' | 'button'	default
itemDirection	排列	'hoz' | 'ver'	hoz
supportInverse	反選	boolean	false

ColumnsLayout 多列布局

屬性	說明	型別	預設值
layout	分欄配置	string	'6:6'
columnGap	列間距	number	0
rowGap	行間距	number	0
display	手機排列	'VERTICAL' | 'HORIZONTAL'	VERTICAL

佈局格式: 2:2:2:2:4 (總和=12), 多行: 4:4:4\|6:6

Button 按鈕

屬性	說明	型別	預設值
type	按鈕型別	'primary'|'normal'|'secondary'	primary
content	按鈕文案	string	按鈕
size	尺寸	'small'|'medium'|'large'	medium
behavior	顯示狀態	'NORMAL'|'DISABLED'|'HIDDEN'	NORMAL
loading	載入狀態	boolean	false

Icon 圖示

屬性	說明	型別	預設值
baseType	基礎圖示	string	smile
size	尺寸	'xxs'|'xs'|'small'|'medium'|'large'	medium
useType	使用自定義	boolean	false

EmployeeField 人員選擇

屬性	說明	型別	預設值
multiple	多選	boolean	false
showEmplId	顯示工號	boolean	false
showAvater	顯示頭像	boolean	true
closeOnSelect	選中後關閉	boolean	false
onChange	值變化	({value}) => void	-

DateField 日期選擇

屬性	說明	型別	預設值
format	日期格式	string	YYYY-MM-DD
type	限制範圍	'none'|'beforeToday'|'afterToday'	none
hasClear	清除按鈕	boolean	true
returnType	返回型別	'timestamp'|'string'|'moment'	timestamp
onChange	值變化	({value}) => void	-

TextField 單行輸入

屬性	說明	型別	預設值
validationType	格式	'text'|'mobile'|'email'|'chineseID'	text
maxLength	字數上限	number	200
hasClear	清除按鈕	boolean	true
hasLimitHint	計數器	boolean	false
trim	去空格	boolean	false
onChange	值變化	({value}) => void	-

TextareaField 多行輸入

屬性	說明	型別	預設值
rows	行數	number	4
autoHeight	自動高度	boolean	false
maxLength	字數上限	number	-

USER() 公式

人員欄位自動填充當前登入人：

{ "valueType": "formula", "formula": "USER()" }

關聯表單資料過濾

設定 dataFilterRules 過濾可選資料

頁面級校驗器

在頁面屬性 → 資料校驗 中配置，檢測重複資料：

{
  "displayRule": "EXIST(角色名稱)",
  "rule": "EXIST(#{formUuid}, \"textField_lenz6y7q\", #{textField_lenz6y7q})",
  "message": "角色名稱不能重複"
}

## 核心概念

### 全域性變數 (State)
類似 React state，用於頁面全域性狀態管理：
- 建立：在資料來源面板 → 新增變數
- 讀取：`this.state.name` 或 `state.name`（變數繫結時）
- 更改：`this.setState({ name: 'Jack' })`
- 特殊變數：`urlParams` - 獲取 URL 引數

⚠️ 注意：setState 後可立即獲取新值（不同於 React），但無回撥函式

### 遠端資料來源
配置遠端 API 進行非同步請求：
```js
// 手動載入
this.dataSourceMap.apiName.load({ params }).then(res => {})

// 重新載入所有自動載入的資料來源
this.reloadDataSource()

資料處理函式： - willFetch - 請求傳送前修改引數 - fit - 響應資料適配 - didFetch - 請求成功後的資料處理 - onError - 錯誤處理

生命週期

export function didMount() { }    // 頁面載入完成
export function willUnmount() { } // 頁面解除安裝前

事件處理

給元件繫結動作事件，在動作面板實現處理邏輯：

export function onClick() {
  const { name, age } = this.params  // 獲取繫結時設定的引數
}

表單校驗

內建規則 + 自定義校驗函式：

function validateRule(value) {
  if (/^杭州/.test(value)) return true
  return false
}

手動觸發校驗：

this.$('textField_xxx').validate((errors, values) => {})

常用校驗示例： - 銀行卡號（Luhn演算法）：16或19位數字 - 身份證號：18位，末尾校驗碼

迴圈渲染

迴圈資料要求是陣列，繫結變數獲取迴圈資料： - this.item - 獲取當前行資料 - this.index - 獲取當前行索引

容器元件繫結迴圈資料後可遍歷渲染，內部元件通過變數繫結訪問資料。

條件渲染

元件高階屬性 → 是否渲染 → 繫結變數控制顯隱

// 繫結 state.xxx 控制顯示
state.urlParams.showName  // 根據URL引數控制

自定義樣式

兩種方式： 1. 基礎樣式配置 - 視覺化配置佈局、文字、背景等 2. 手工編碼模式 - CSS 選擇器、偽類等

名詞解釋

術語	說明
全域性變數	類似 React state，頁面狀態管理
遠端 API	HTTP 介面配置，包含請求地址、引數、資料處理函式
Schema	低程式碼協議，描述頁面/元件結構，類似 HTML
元件唯一標識	元件的 fieldId，宜搭全域性唯一標識
頁面	獨立展示介面（表單、報表、自定義頁面）
物料	可沉澱的前端能力（元件、區塊、模板）
業務元件	基於基礎元件的業務領域元件
低程式碼業務元件	通過低程式碼編輯器搭建的業務元件
區塊	組合多個元件/佈局，可複製複用
模板	垂直業務領域的頁面模板

整合自動化（聯結器）

觸發型別： - 表單事件觸發 - 提交/流程狀態更新 - 定時觸發 - 週期迴圈 - 應用事件觸發 - 釘釘生態事件 - Webhook 觸發

節點型別： - 觸發器 - 一方聯結器（釘釘訊息、待辦等） - 自定義聯結器 - 資料節點（新增/更新/獲取/刪除） - 分支節點（條件分支/並行分支） - 發起審批 - 訊息節點 - 開發者節點（Groovy 指令碼）

自定義元件

⚠️ 僅限專屬版

概念

• 普通元件 - 展示型，無資料儲存
• 表單元件 - 可提交資料（暫未開放）

開發流程

1. 建立元件 - 應用設定 → 元件管理 → 新增元件
2. 開發除錯 - 定義屬性 + 搭建檢視 + 編寫邏輯
3. 釋出版本 - 開發版(0.1.0) / 正式版(1.x.x)
4. 安裝使用 - 選擇頁面型別安裝

元件屬性 (propTypes)

• 屬性型別：文本、布林、數字、物件、陣列、函式、元素
• 設定器：TextSetter、BoolSetter、NumberSetter、JsonSetter、OptionsSetter、ActionSetter、SlotSetter 等

元件生命週期

export function componentDidMount() { }   // 渲染完成
export function componentDidUpdate() { }  // 更新完成
export function componentDidCatch() { }   // 錯誤捕獲
export function componentWillUnmount() { } // 銷燬前

元件內獲取屬性

this.props.xxx  // 獲取傳入的屬性

頁面中操作自定義元件

this.$('fieldId').get('propName')  // 獲取屬性
this.$('fieldId').set('propName', value)  // 設定屬性

元件聯動

新增 function 型別屬性作為事件回撥，在元件內通過 this.props.xxx() 觸發

注意事項

• fieldId 不能隨意修改，會影響公式和儲存
• 線上應用請安裝正式版本 (1.x.x)
• 不支援刪除/解除安裝元件

除錯方法

• debugger 斷點除錯
• 瀏覽器控制台 cmd/ctrl + p → page.js 新增斷點
• URL 加 ?__showDevtools 開啟除錯面板
• URL 加 ?__debug 檢視/編輯 Schema
• 移動端除錯：引入 vConsole

const vConsole = 'https://g.alicdn.com/code/lib/vConsole/3.11.2/vconsole.min.js';
const js = document.createElement('script');
js.src = vConsole;
document.body.append(js);
js.onload = function() { window.vConsole = new window.VConsole(); };

API 體系

宜搭 JS-API

前端頁面呼叫，包括： - 全域性變數：this.state.xxx / this.setState() - 遠端資料：this.dataSourceMap.xxx.load() / this.reloadDataSource() - 元件操作：this.$(fieldId).getValue() / this.$(fieldId).setValue() - 工具類：this.utils.toast() / this.utils.dialog() / this.utils.router.push() - 校驗：this.$(fieldId).validate() / this.$(fieldId).setValidation()

跨應用資料來源 API (OpenAPI)

遠端資料來源配置中呼叫，用於表單資料操作： - 新建：POST /v1/form/saveFormData.json - 更新：POST /v1/form/updateFormData.json - 刪除：POST /v1/form/deleteFormData.json - 查詢：GET /v1/form/searchFormDatas.json - 流程發起：POST /v1/process/startInstance.json

釘釘 JS-API

需手動載入：https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js - 彈框：device.notification.alert/confirm/prompt - 掃碼：biz.util.scan - 地圖：biz.map.locate/view - 通訊錄：biz.contact.choose/complexPicker

服務端 OpenAPI

需通過釘釘開放平臺呼叫，需要鑑權： - 建立釘釘應用 → 新增許可權 → 獲取 access_token - 呼叫服務端介面

2026 年新功能

2026.02.03 整合自動化升級

• 異常日誌支援批次重試
• 日誌例項ID互動最佳化
• 資料節點過濾條件增加"父級條件"
• 新增 AI 節點

2026.01.20 新功能

• 宜搭表單新增「釘釘文件」選擇元件
• 富文本支援釘釘文件連結自動識別
• 附件/圖片支援批次下載
• 關聯表單/關聯列表支援自定義顯示欄位

2026.01.05 新功能

• 貼一貼：附件上傳快捷黏貼（Ctrl+V）
• 例項標題支援變數動態更新
• 資料管理文本篩選動態匹配
• 關聯表單資料搜尋升級（大小寫自動匹配）

快速參考

元件操作

// ✅ 正確：操作已存在的元件（通過 fieldId）
this.$('textField_m2iqeyip').getValue()
this.$('textField_m2iqeyip').setValue('hello')

// ❌ 錯誤：不要宣告/匯入元件
// const MyButton = () => {...}  // 禁止！

狀態管理

this.setState({ key: 'value' })
const value = this.state.key

// URL 引數（預設全域性變數）
const param = this.state.urlParams.xxx

生命週期

export function didMount() { }   // 頁面載入完成
export function willUnmount() { } // 頁面解除安裝前

遠端資料來源

this.dataSourceMap.api.load(params).then(res => { })
this.reloadDataSource()

常用工具

this.utils.toast({ title: '成功', type: 'success' })
this.utils.router.push('/pageId')
this.utils.getLoginUserId()

詳細文件

• JS-API 完整參考 - 元件操作、校驗、彈窗、路由等
• 故障排查指南 - 除錯方法、常見問題
• TodoMVC 入門教程 - 新人入門完整示例

除錯方法

• URL 加 ?__showDevtools 開啟除錯面板
• URL 加 ?__debug 檢視 Schema
• 程式碼加 debugger 斷點
• 使用 console.log 輸出除錯資訊

參考資源

資源	地址
幫助中心	https://docs.aliwork.com/
開發者中心(前端)	https://developers.aliwork.com/
開放平臺(服務端)	https://open.dingtalk.com/
示例中心	https://www.aliwork.com/o/coc
更新日誌	https://docs.aliwork.com/docs/yida_updates
OpenAPI	https://developers.aliwork.com/docs/api/openAPI

服務端 OpenAPI (open.dingtalk.com)

需通過釘釘開放平臺呼叫，需要建立應用並獲取授權。

流程 API

介面	路徑	說明
發起審批	POST /yida/v1/process/startInstance.json	processCode, formUuid, formDataJson
刪除流程	POST /yida/v1/process/delete.json	processInstanceId
終止流程	POST /yida/v1/process/terminate.json	processInstanceId
查詢例項	GET /yida/v1/process/getById.json	processInstanceId
查詢例項列表	GET /yida/v1/process/getInstanceIds.json	formUuid, instanceStatus

表單 API (V2)

介面	路徑	說明
儲存資料	POST /yida/v1/forms/saveData.json	formUuid, formDataJson
更新資料	POST /yida/v1/forms/updateData.json	formInstId, formDataJson
查詢資料	GET /yida/v1/forms/listData.json	formUuid, searchFieldJson
獲取子表資料	GET /yida/v1/forms/listSubTableData.json	formUuid, formInstId, tableFieldId

請求示例

// 發起流程
const params = {
  processCode: "TPROC--CFYJ5HYUN89NJ1JW3IXBI7A95RXM3652O9MKK3",
  formUuid: "FORM-CFYJ5HYUN89NJ1JW3IXBI7A95RXM3552O9MKK2",
  formDataJson: JSON.stringify({ textField_kkm9o5cd: "123" })
};
this.dataSourceMap.myDatasource.load(params);

更多 API

• 批次操作、子表資料、審批記錄等詳見開放平臺文件

場景案例專題

表單專題

常見表單開發場景： - 資料許可權：只允許檢視自己的資料（表單許可權設定） - 子表單：獲取子表單值賦值給主表、子表單序號生成、子表單批次匯入 - 資料聯動：資料來源獲取主表資料在子表展示、下拉框賦值、關聯表單填充 - 校驗：子表單重複校驗、元件即時校驗唯一性、自定義校驗 - 高階：圖片裁剪上傳、掃碼識別、地址元件動態型別、公曆轉農曆

自定義頁面專題

• 頁面搭建、元件使用、事件處理

聯結器專題

• 整合自動化、釘釘訊息、待辦通知

實用工具專題

• 常用工具元件使用

報表專題

• 資料視覺化、圖表配置

公式專題

• 公式函式使用、計算邏輯

方案專題

• 行業解決方案、業務場景案例

Schema 生成

宜搭頁面使用 JSON Schema 定義，可以直接貼上到設計器中。

基礎結構

{
  "type": "nodeSchema",
  "componentsMap": {},
  "componentsTree": [
    {
      "componentName": "PageSection",
      "props": { ... },
      "children": [ ... ]
    }
  ]
}

常用元件 Schema

TextField (單行文本)

{
  "componentName": "TextField",
  "props": {
    "fieldId": "textField_xxxxx",
    "label": { "type": "i18n", "zh_CN": "欄位名稱", "en_US": "欄位名稱" },
    "behavior": "NORMAL",
    "valueType": "custom",
    "validation": [{ "type": "required" }],
    "placeholder": { "type": "i18n", "zh_CN": "請輸入", "en_US": "請輸入" },
    "maxLength": 200,
    "visibility": ["PC", "MOBILE"]
  }
}

NumberField (數字)

{
  "componentName": "NumberField",
  "props": {
    "fieldId": "numberField_xxxxx",
    "label": { "type": "i18n", "zh_CN": "金額", "en_US": "金額" },
    "precision": 2,
    "step": 1,
    "behavior": "NORMAL",
    "valueType": "custom",
    "validation": [
      { "type": "required" },
      { "type": "minValue", "param": 0 },
      { "type": "maxLength", "param": 25 }
    ]
  }
}

DateField (日期)

{
  "componentName": "DateField",
  "props": {
    "fieldId": "dateField_xxxxx",
    "label": { "type": "i18n", "zh_CN": "日期", "en_US": "日期" },
    "format": "YYYY-MM-DD",
    "behavior": "NORMAL",
    "valueType": "custom",
    "validation": [{ "type": "required" }]
  }
}

SelectField (下拉選擇)

{
  "componentName": "SelectField",
  "props": {
    "fieldId": "selectField_xxxxx",
    "label": { "type": "i18n", "zh_CN": "選項", "en_US": "選項" },
    "mode": "single",
    "showSearch": true,
    "behavior": "NORMAL",
    "valueType": "custom",
    "defaultDataSource": {
      "customStashOptions": [
        { "text": { "zh_CN": "選項一", "en_US": "選項一" }, "value": "選項一", "sid": "serial_xxx" }
      ]
    }
  }
}

RadioField (單選)

發現更多技能外掛，請訪問7w4.net。

{
  "componentName": "RadioField",
  "props": {
    "fieldId": "radioField_xxxxx",
    "label": { "type": "i18n", "zh_CN": "型別", "en_US": "型別" },
    "itemDirection": "hoz",
    "behavior": "NORMAL",
    "valueType": "custom",
    "dataSource": [
      { "text": { "zh_CN": "選項A", "en_US": "選項A" }, "value": "A", "sid": "serial_a" },
      { "text": { "zh_CN": "選項B", "en_US": "選項B" }, "value": "B", "sid": "serial_b" }
    ]
  }
}

EmployeeField (人員選擇)

{
  "componentName": "EmployeeField",
  "props": {
    "fieldId": "employeeField_xxxxx",
    "label": { "type": "i18n", "zh_CN": "申請人", "en_US": "申請人" },
    "multiple": false,
    "behavior": "NORMAL",
    "valueType": "custom",
    "userRangeType": "ALL",
    "validation": [{ "type": "required" }]
  }
}

AssociationFormField (關聯表單)

{
  "componentName": "AssociationFormField",
  "props": {
    "fieldId": "associationFormField_xxxxx",
    "label": { "type": "i18n", "zh_CN": "關聯資料", "en_US": "關聯資料" },
    "behavior": "NORMAL",
    "multiple": false,
    "associationForm": {
      "formUuid": "FORM-XXXXXXXX",
      "appType": "APP_XXXXXXXX"
    },
    "validation": [{ "type": "required" }]
  }
}

Image (圖片)

{
  "componentName": "Image",
  "props": {
    "fieldId": "image_xxxxx",
    "src": "https://example.com/image.jpg",
    "width": 100,
    "height": 100,
    "fit": "cover"
  }
}

Text (文本)

{
  "componentName": "Text",
  "props": {
    "fieldId": "text_xxxxx",
    "content": { "type": "i18n", "zh_CN": "文本內容", "en_US": "文本內容" },
    "__style__": ":root { font-size: 16px; font-weight: 600; }"
  }
}

LinkBlock (連結塊)

{
  "componentName": "LinkBlock",
  "props": {
    "fieldId": "linkBlock_xxxxx",
    "link": { "type": "url", "url": "https://example.com", "isBlank": true },
    "__style__": ":root { margin: 10px; }"
  }
}

Div (容器)

{
  "componentName": "Div",
  "props": {
    "fieldId": "div_xxxxx",
    "__style__": ":root { padding: 20px; background: #fff; }"
  }
}

佈局元件

PageSection (區塊)

{
  "componentName": "PageSection",
  "props": {
    "fieldId": "pageSection_xxxxx",
    "title": { "type": "i18n", "zh_CN": "基本資訊", "en_US": "基本資訊" },
    "showHeader": true,
    "behavior": "NORMAL"
  }
}

ColumnsLayout + Column (多列布局)

{
  "componentName": "ColumnsLayout",
  "props": {
    "fieldId": "columnsLayout_xxxxx",
    "layout": "4:4:4"
  },
  "children": [
    { "componentName": "Column", "props": { "fieldId": "column_1" } },
    { "componentName": "Column", "props": { "fieldId": "column_2" } },
    { "componentName": "Column", "props": { "fieldId": "column_3" } }
  ]
}

常用屬性

屬性	說明	值
behavior	元件狀態	NORMAL, READONLY, HIDDEN, DISABLED
valueType	值型別	custom, formula, linkage
validation	校驗規則	required, minValue, maxLength, customValidate
formula	公式	CONCATENATE, TODAY, TIMESTAMP, USER, SUM 等
format	日期格式	YYYY-MM-DD, YYYY-MM-DD HH:mm:ss

生成欄位 ID

欄位 ID 格式：元件型別_隨機字尾，例如： - textField_abc123 - numberField_def456 - selectField_ghi789

示例 App ID

當前應用：APP_F22M8EK6I2HZTBIYV3U5

這個 Skill 質量不錯，內容很全面，涵蓋了宜搭開發的方方面面，從基礎操作到高階技巧都有。觸發詞設定合理，能準確識別開發需求。優點是示例程式碼豐富、文件結構清晰，對新手友好。不足之處是文件之間跳轉不夠便捷，查詢特定功能需要費些時間。總體來說，這是一個值得擁有的宜搭開發助手，能有效提升開發效率。