欄位檔案結構

基本的網站原始碼皆放置在 Ede.Uofx.Customize.Web 內。

├─ ClientApp (前端 Angular)
│  ├─ src
│  │  ├─ app
│  │  │  ├─ mobile (放置手機版內容)
│  │  │  ├─ service (基礎發送至後端API請求服務)
│  │  │  ├─ shared (放置共用內容，EX: Props 模型)
│  │  │  ├─ web (放置網頁版內容)
│  │  │  └─ app.module.ts
│  │  ├─ assets
│  │  │  └─ configs
│  │  │     ├─ fields-design.json (設定欄位樣式)
│  │  │     └─ fields-runtime.json (設定欄位執行時使用的程式)
│  │  └─ plugin.manifest.json (模組包機處配置檔)
│  └─ webpack-exposes.config.js (設定前端 Module 建置後的別名)
└─ Controllers (後端 API)

• 實作 web 外掛欄位時可參考從 Sample 下載的專案檔內 src/app/web/hello-world 中的檔案結構，自行建立一樣的檔案結構內容，需有 design|props|write|print|view 這幾項目錄結構。
• 實作 app 外掛欄位可參考 src/app/mobile/hello-world 中檔案結構自行建立一樣的檔案結構內容，需有 design|props|write|print|view 這幾項目錄結構。

---

外掛欄位 module.ts

外掛欄位實作時除了基本的模式之外也要設定外掛欄位本身的 module.ts(例如: hello-world.module.ts) 來定義外掛欄位所需的模組和對應讀取的外掛欄位 Component 設定。

hello-world.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild([
      { path: "", redirectTo: "design", pathMatch: "full" },
      { path: "design", component: HelloWorldDesignComponent },
      { path: "props", component: HelloWorldPropsComponent },
      { path: "write", component: HelloWorldWriteComponent },
      { path: "view", component: HelloWorldWriteComponent },
      {
        path: "app",
        loadChildren: () =>
          import("../../mobile/hello-world/hello-world.module").then(
            (m) => m.FieldHelloWorldAppModule
          ),
      },
    ]),
    TranslateModule.forChild(),
    ...UOF_MODULES,
  ],
})
export class HelloWorldModule {
  static comp = {
    props: HelloWorldPropsComponent,
    design: HelloWorldWriteComponent,
    write: HelloWorldWriteComponent,
    view: HelloWorldWriteComponent,
    print: HelloWorldWriteComponent,
  };
}

Note

實作外掛欄位時可先以設計模式(design)、屬性設定(props)與填寫模式(write)這三種情境的外掛欄位來建立最基礎的 BPM 表單。