欄位檔案結構
基本的網站原始碼皆放置在 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 表單。