httpコネクタ-従業員名簿情報の取得

適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。

• 適切なメンバーコンポーネントを通じて従業員の職務、メールボックス、勤続年数、携帯電話番号などの情報を入手する。

前提条件

このチュートリアルでは、適切なコネクタを使用しています。まず、次のことを知ることができますhttpコネクタ。

• 従業員名簿フィールド情報の取得

効果を実現する

実装手順

カスタムコネクタ認証証明書とインタフェース権限を申請する必要があります

申請した場合、この手順は無視できます。

コネクタの作成

httpコネクタを作成します。詳細はを参照してくださいhttpコネクタ。

コネクタの基本情報とログイン方法の設定

コネクタは次のように構成されています。

• コネクタ表示名: 従業員名簿フィールド情報を取得するように設定
• コネクタの説明: 従業員名簿フィールド情報を取得するように設定
• ドメイン名: に設定しますApi.dingtalk.com
• リクエストプロトコル: に設定しますhttps
• Base url: に設定します/
• 認証タイプ: ホッチキスのオープンプラットフォーム検証に設定します

構成が完了したら、「次へ」をクリックして、コネクタを構成してアクションを実行します。

コネクタの設定アクションの実行

実行アクションを追加します。

基本情報を設定します。

基本情報は以下のように構成します。

• ユニークなロゴ: に設定しますGetusermessage
• アクション名: 従業員名簿フィールド情報を取得するように設定
• アクションの説明: 従業員名簿フィールド情報を取得するように設定

インタフェース要求を構成します。

インタフェース要求は次のように構成されています。

• リクエストアドレス: に設定しますV1.0/hrm/rosters/lists/query
• リクエストメソッド: に設定しますPost
• Body: 次のように設定します

{
  "userIdList" : "String",
  "fieldFilterList" : "String",
  "appAgentId" : 957064202,
  "text2SelectConvert" : true
}

• ヘッド: に設定しますContent-type: application/json

Bodyを解析し、必須項目を設定します。

インタフェースの設定が戻ります。

インタフェースの戻り設定は次のとおりです。

{
  "result": [
    {
      "corpId": "dingfa0876060daae270bc961a6cb783455b",
      "userId": "",
      "fieldDataList": []
    }
  ]
}

Bodyを解析し、正常な識別位置を設定します。

コネクタ設定の保存

コネクタ認証テンプレートの設定

テストコネクタ

実際の場面でコネクタパラメータを入力し、テストをクリックします。

Statusが200okを返すと成功し、bodyが返されないエラーは、コネクタが正しく構成され、使用可能であることを証明します。

普遍的なフォームページの作成

通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。

キャンバス領域で次のコンポーネントをドラッグします。

• メンバー: メンバーに名前を付けます
• 単一行テキスト: 部門名
• 単一行テキスト: ポストと命名

データソースの作成

メンバーコンポーネントのイベントの設定

この例のメンバーはラジオモードです。複数選択モードを使用する場合はコードを変更する必要があります。

次の関数をバインドします

export function onUserChange({ value }) {
  if (!value) {
    this.$('textField_lcijv9od').reset();
    this.$('textField_lcijv9oe').reset();
    return;
  };
  this.dataSourceMap.getUserMessage.load({
    inputs: JSON.stringify({
      Headers: {
        'Content-Type': 'application/json',
      },
      Body: {
        userIdList: [this.getUserId('employeeField_lcijg3rs')],
        fieldFilterList: ['sys00-dept', 'sys00-position'],
        appAgentId: '2345185741',
        text2SelectConvert: true,
      },
    }),
  }).then((res) => {
    const { result = [] } = res;
    if (result.length) {
      const { fieldDataList = [] } = result[0];
      const deptName = fieldDataList.filter((item) => {
        return item.fieldCode === 'sys00-dept';
      });
      const position = fieldDataList.filter((item) => {
        return item.fieldCode === 'sys00-position';
      });
      this.$('textField_lcijv9od').setValue(deptName[0].fieldValueList[0].value); // 部门
      this.$('textField_lcijv9oe').setValue(position[0].fieldValueList[0].value); // 职位
    } else {
      this.utils.toast({
        title: '获取员工花名册信息失败',
        type: 'error',
      });
    }
  }).catch((error) => {
    this.utils.toast({
      title: '请检查花名册的连接器是否配置正确.',
      type: 'error',
    });
  })
}

/**
* 获取选择成员的 userId
* @param fieldId 成员组件唯一标识
*/
export function getUserId(fieldId = '') {
  return fieldId ?
    Array.isArray(this.$(fieldId).getValue()) ?
      (this.$(fieldId).getValue() || []).length ?
        this.$(fieldId).getValue()[0].value : ''
      : (this.$(fieldId).getValue() || {}).value : '';
}

ビデオチュートリアル

オンラインで試遊する