配置設定

外掛模組開發後於 UOF X 使用時需先調整 Config 內容，如此才能在 UOF X 正常更新內容，並且正常顯示表單欄位與選單。

JSON 設定檔位置固定不可任意更換，內容可參照於@uofx/plugin中所提供的 schema 進行撰寫，所需設定的屬性與類型使用$schema設定後皆有說明可以參考。

配置與設定檔所在位置

└─ src
  ├─ assets
  |   └─ configs
  |       ├─ fields-design.json
  |       ├─ fields-runtime.json
  |       ├─ panels-design.json
  |       ├─ panels-runtime.json
  |       └─ routes.json
  ├─ plugin.manifest.json
  └─ plugin.version.json

配置檔 plugin.manifest.json¶

schemaVersion: 整個外掛模組的配置與設定案版本，若目前的版本與安裝@uofx/plugin後所提供的版本不一致，代表配置與設定檔結構有變更，需要進行調整。
name: 外掛模組名稱。
code: 在 Plugin 管理中需為唯一值，僅限使用 英文字母、 數字 與 .，長度上限為 50 字元。
description: 外掛模組描述。
manufacturerCode: 供應商代碼。
manufacturer: 供應商名稱。
production: 設定false會在 Plugin 管理中的更多下拉按鈕中出現 「重載設定檔」，重載設定可以直接強制更新所有除了code以外的設定，不必透過標準的檢查更新流程來更新設定檔。

plugin.manifest.json

{
  "$schema": "../node_modules/@uofx/plugin/schema/plugin-manifest.schema.json",
  "schemaVersion": "112",
  "name": "一等一外掛模組範例",
  "code": "Ede.Sample.Plugin",
  "description": "新一代 UOF X 外掛模組",
  "manufacturerCode": "Ede",
  "manufacturer": "一等一科技",
  "production": false
}

版本設定檔 plugin.versions.json¶

用來設定模組版本與 UOF X 相依性及變更說明，UOF X 會依照版本設定順序由上而下排序，所以版本需要由大到小進行設定。

version: 模組版本。
minimumUOFXVersion: 最小 UOF X 支援版號，共 3 碼，以下方範本為例，2.92.0 會執行並使用 2.0 版本程式，2.95.0 則會執行並使用 3.0 版本程式。
changelog: 提供string陣列，條列式呈現。

plugin.versions.json

{
  "$schema": "../node_modules/@uofx/plugin/schema/plugin-versions.schema.json",
  "versions": [
    {
      "version": "3.0",
      "minimumUOFXVersion": "2.94.0",
      "changelog": [
        "新增了2個欄位",
        "修正了一些錯誤"
      ]
    },
    {
      "version": "2.0",
      "minimumUOFXVersion": "2.90.0",
      "changelog": [
        "本次更新除掉了幾條蟲"
      ]
    },
    {
      "version": "1.0",
      "minimumUOFXVersion": "2.89.1",
      "changelog": [
        "全新對話功能上線！"
      ]
    }
  ]
}

version 的版本需和 nginx 的 location /1_0/ 相對應，1_0 代表版本 1.0。以此類推，若是需要使用 2.0 版本則需要再新增 location /2_0/ 來對應。

nginx.conf

http {
    # 其他設定省略...

    upstream Remote {
        server localhost:40001;
    }

    # 主要設定
    server{

        # 對外要使用的port
        listen 8888;

        location /1_0/ {
                proxy_pass http://Remote/;
        }

        location / {
                proxy_pass http://Remote/;
        }
    }
}

詳細設定請參考開發環境設定

設定檔共用規則¶

icon設定相對路徑，如下範例中設定為assets/icons/u-plugin-form.svg，於執行階段會依據版本組成http://plugin/1_0/assets/icons/u-plugin-form.svg。

欄位設計檔 fields-design.json¶

fields-design.json 內的欄位代表在 BPM 表單設計時，左方可用的欄位類型，依照自訂的 group 進行分類。

fieldGroups.code與fields.group需對應。
fieldGroups.code須為唯一值。
fields.code與 fields-runtime.json 中唯一名稱需對應。
fields.icon請參考共用規則。

fields-design.json

{
  "$schema": "../../../node_modules/@uofx/plugin/schema/fields-design.schema.json",
  "fieldGroups": [
    {
      "code": "group1",
      "name": "群組一"
    }
  ],
  "fields": [
    {
      "group": "group1",
      "code": "sampleField",
      "name": "sample欄位",
      "icon": "assets/icons/u-plugin-form.svg",
      "sizeConfig": {
        "defaultCols": 2,
        "defaultRows": 1,
        "minCols": 1,
        "minRows": 1
      }
    },
    {
      "group": "group1",
      "code": "anotherField",
      "name": "進階欄位",
      "icon": "assets/icons/u-plugin-form.svg",
      "sizeConfig": {
        "defaultCols": 8,
        "defaultRows": 2,
        "minCols": 8,
        "minRows": 2
      }
    }
  ]
}

欄位執行設定檔 fields-runtime.json¶

設定表單開啟後讀取的外掛欄位內容。

sampleField為提供上方 fields-design.json 中所設定的fields.code使用。
exposedModule與moduleName為 webpack-exposes.config.js 所自訂的名稱及檔案來源位置內的moduleName，兩個參數與 web 中的對應，app 則與 app 的內容對應。

fields-runtime.json

{
  "$schema": "../../../node_modules/@uofx/plugin/schema/fields-runtime.schema.json",
  "sampleField": {
    "exposedModule": "./HelloWorld",
    "moduleName": "HelloWorldModule",
    "app": {
      "exposedModule": "./HelloWorld",
      "moduleName": "FieldHelloWorldAppModule"
    }
  },
  "anotherField": {
    "exposedModule": "./AdvancedField",
    "moduleName": "AdvancedFieldModule",
    "app": {
      "exposedModule": "./AdvancedField",
      "moduleName": "FieldAdvancedAppModule"
    }
  }
}

面板設計檔 panels-design.json¶

admin為管理者端面板，user為使用者端面板，以陣列方式新增。

code: 面板唯一識別碼。
name: 面板名稱，僅在 Plugin 權限管理中顯示用。
sizeConfig: 面板的預設大小。
- defaultCols: 面板所占寬度。
- defaultRows: 面板所占高度。

panels-design.json

{
  "$schema": "../../../node_modules/@uofx/plugin/schema/panels-design.schema.json",
  "admin": [
    {
      "code": "adminSample",
      "name": "管理面板",
      "sizeConfig": {
        "defaultCols": 6,
        "defaultRows": 2
      }
    }
  ],
  "user": [
    {
      "code": "userSample",
      "name": "使用者面板",
      "sizeConfig": {
        "defaultCols": 6,
        "defaultRows": 2
      }
    }
  ]
}

面板執行設定檔 panels-runtime.json¶

設定首頁讀取的面板內容。

adminSample為提供上方 panels-design.json 中所設定的code使用。
exposedModule與moduleName為 webpack-exposes.config.js 所自訂的名稱及檔案來源位置內的moduleName，因面板設計為 standalone component，所以moduleName實際上填寫的為 component class 名稱。

panels-runtime.json

{
  "$schema": "../../../node_modules/@uofx/plugin/schema/panels-runtime.schema.json",
  "adminSample": {
    "exposedModule": "./Panel/Admin",
    "moduleName": "HelloWorldPanelComponent"
  },
  "userSample": {
    "exposedModule": "./Panel/User",
    "moduleName": "HelloWorldPanelComponent"
  },
}

外掛頁面路由與選單設定 routes.json¶

menu.icon與children.icon請參考共用規則。
menu.name為主選單名稱。
funcId 必須是 唯一值，無論是 admin、user 還是 app，都 不能重複使用 。命名時請統一使用 全大寫字母搭配底線 作為分隔。此欄位的用途與 Plugin Page 權限設定相關，詳細請參考：設定 Plugin Page 權限

如果你希望加上舉例或語氣更輕鬆一點也可以說喔～ - path為路由路徑，設定內容請參考開始 Web 外掛頁面>路由設定

routes.json

{
  "$schema": "../../../node_modules/@uofx/plugin/schema/routes.schema.json",
  "admin": {
    "menu": {
      "name": "EDE 外掛模組",
      "icon": "assets/icons/pets.png",
      "children": [
        {
          "funcId": "CONTAINER",
          "name": "內容置中",
          "icon": "assets/icons/home.png",
          "path": "container"
        },
        {
          "funcId": "SUBLAYOUT",
          "name": "有TAB的頁面",
          "icon": "assets/icons/settings.png",
          "path": "sub"
        },
        {
          "funcId": "SUBLAYOUT_SIDER",
          "name": "有側邊欄的頁面",
          "icon": "assets/icons/security.png",
          "path": "sub/sider"
        }
      ]
    }
  },
  "user": {
    "menu": {
      "name": "EDE 外掛模組",
      "icon": "assets/icons/pets.png",
      "children": [
        {
          "funcId": "USERFULL",
          "name": "滿版的頁面",
          "icon": "assets/icons/house.png",
          "path": "full"
        },
        {
          "funcId": "USERTAB",
          "name": "有TAB的頁面",
          "icon": "assets/icons/rocket_launch.png",
          "path": "tab"
        }
      ]
    }
  },
  "app": {
    "menu": {
      "name": "EDE 外掛模組",
      "children": [
        {
          "funcId": "APP_LOBBY",
          "name": "大廳",
          "icon": "assets/icons/house.png",
          "path": "lobby"
        }
      ]
    }
  }
}