開始撰寫第一個外掛欄位

本頁提供 Web / App 外掛欄位實作範例

Web 外掛欄位

flowchart LR
    A[建立欄位架構] --> B[建立設定檔]
    B --> C[開發欄位]
    C --> D[擴充屬性]

    style A fill:#fff3e0
    style B fill:#e3f2fd
    style C fill:#e3f2fd
    style D fill:#e3f2fd

參考檔案： order-field-complete

flowchart LR
    A[建立欄位架構] --> B[建立設定檔]
    B --> C[開發欄位]
    C --> D[擴充屬性]

    style A fill:#e3f2fd
    style B fill:#fff3e0
    style C fill:#e3f2fd
    style D fill:#e3f2fd

flowchart LR
    A[建立欄位架構] --> B[建立設定檔]
    B --> C[開發欄位]
    C --> D[擴充屬性]

    style A fill:#e3f2fd
    style B fill:#e3f2fd
    style C fill:#fff3e0
    style D fill:#e3f2fd

flowchart LR
    A[建立欄位架構] --> B[建立設定檔]
    B --> C[開發欄位]
    C --> D[擴充屬性]

    style A fill:#e3f2fd
    style B fill:#e3f2fd
    style C fill:#e3f2fd
    style D fill:#fff3e0

📋 完整屬性設定指南

• 如果我要將外掛欄位的內容放在表單主旨上，或是當作條件與簽核站點
• UOF X BPM 提供
  • 簽核站點(toBeNodes)
  • 條件站點(toBeConditions)
  • 表單主旨(toBeSubjects)
  • 搜尋條件(關鍵字)(searchContentJsonPath)
  • 欄位計算(toBeCalculates)
  • 表單匯出(toBeExports)
  • 上傳檔案(fileJsonPath)

欄位計算整合範例

當外掛欄位需要與標準欄位進行計算勾稽時，需要實作以下邏輯：

ngOnInit(): void {
  this.form.valueChanges.subscribe({
    next: res => {
      // 更新每次的value結果，為了跨欄位存取使用
      this.fieldLogic.setSelfControlValue(this.selfControl, this.form, res);
      // 更新驗證狀態
      this.selfControl.updateValueAndValidity();
  }
})

APP 外掛欄位

Write 模式

APP 主要實作 Write 模式，使用 Ionic 元件庫。

• 將⼿機版外掛⾴⾯新增⾄路徑：ClientApp>src>app>mobile 資料夾下
• app.module.ts 宣告 module

app.module.ts

import { OrderFieldCompleteAppModule } from './mobile/order-field-complete/order-field-complete.module';

@NgModule({
  ...
  imports: [
    ...
    OrderFieldCompleteAppModule
  ],
  ...
})

• fields-runtime.json 在外掛欄位新增 app 內容

fields-runtime.json

{
  ...
  "orderFieldComplete": {
  "exposedModule": "./OrderFieldComplete",
  "oduleName": "OrderFieldCompleteModule",
  "app": {
      "exposedModule": "./OrderFieldComplete",
      "moduleName": "OrderFieldCompleteAppModule"
    }
  },
  ...
}

• webpack-exposes.config.js 新增 app module 路徑

webpack-exposes.config.js

 const exposes = {
      web: {
        ...
      },
      app: {
        './OrderFieldComplete': './src/app/mobile/order-field-complete/order-field-complete.module.ts'
      }
};

module.exports = exposes;

下一步

完成第一個外掛欄位後繼續後續開發

回到開發地圖