如何使用 Plugin API

安裝 Plugin API 套件

在外掛欄位開發的 Angular 專案中，執行指令npm i @uofx/plugin即可完成安裝。

Import 相依

安裝成功後可在外掛欄位的 module.ts 中的provider設定這個服務給外掛欄位使用。

advanced-field.module.ts

import { UofxPluginApiService } from "@uofx/plugin/api"

@NgModule({
  imports: [ ... ]  
  providers: [
    UofxPluginApiService
  ]
})
export class AdvancedFieldModule {
  ...
}

如此便可在外掛欄位元件中取得。

advanced-field.write.component.ts

import { UofxPluginApiService } from "@uofx/plugin/api"

@Component({
  ...
})
export class AdvancedFieldWriteComponent ... {
  constructor(private pluginService: UofxPluginApiService) {
    this.pluginService ...
  }
}

可用方法

• getUserInfo(): 取得員工資訊。
• getCorpInfo(): 取得公司資訊。

advance-field.write.component.ts

loadInfo() {
  // 呼叫 API 取得員工和公司相關資訊
  zip(
    this.pluginService.getCorpInfo().toPromise(),
    this.pluginService.getUserInfo(this.taskNodeInfo.applicantId).toPromise()
  ).subscribe({
    next:  ([corpInfo, empInfo])  => {
      if(empInfo.employeeNumber){
        // 取得員工編號
        this.empNo = empInfo.employeeNumber;
      }
      console.log(this.empNo);
    },
    complete: () => {
      console.log(this.empNo);
      // 讓畫面更新
      this.cdr.detectChanges();
    }
  });
}