使用例¶

サンプルデータのユーザー(A10007)の所属情報を取得して申請フォーム(休暇届)を申請するまでの一連の操作を使用例として説明します。

注釈

この説明の手順を進めるにあたり、前提条件としてサンプルデータが登録されており、APIトークンは[kH8ILqUBgKrDIBGqqWGgEYuLBC469W5MRuktp00I]が設定されているものとします。また、REST APIへのアクセスはJavaScriptのFetch APIを使用しています。※Internet Explorer 11はFetch APIに対応していないため、他の対応ブラウザーでお試しください

1. ユーザー(A10007)の所属情報を取得します。

GETメソッドで[/users/A10007]へアクセスします。レスポンスとして申請時に必要となるユーザーの所属情報が返されます。

fetch('http://localhost:8080/XFV20/api/users/A10007', {
  method: 'GET',
  headers: {
    'X-CWF-API-Token': 'kH8ILqUBgKrDIBGqqWGgEYuLBC469W5MRuktp00I'
  }
}).then(response => {
  if (!response.ok) {
    // REST APIのエラーが発生した場合
    throw response;
  }
  // ユーザーの所属情報が正常に取得できた場合
  return response.json()
}).then(json => {
  return json.users.shift();
}).then(user => {
  // 所属情報
  const belong = user.belongs.shift();

  // ユーザーのID
  const userId = user.user_id;
  // 組織コード
  const organizationCode = belong.organization_code;
  // グループコード
  const groupCode = belong.group_code;
  // 役職コード
  const authorityCode = belong.authority_code;
}).catch(handleError);

ヒント

リクエストヘッダーからAPIトークンを指定して認証しています。

2. ユーザー(A10007)の申請フォームの一覧を取得します。

GETメソッドで[/users/A10007/apply_forms]へアクセスします。パラメーターにはユーザーの所属情報を設定し、申請フォーム名として[休暇届]を設定して絞り込みます。レスポンスとして申請時に必要となる申請フォームIDが返されます。

const params = new URLSearchParams({
  'user_id': userId,
  'organization_code': organizationCode,
  'group_code': groupCode,
  'authority_code': authorityCode,
  'form_name': '休暇届'
});

fetch('http://localhost:8080/XFV20/api/users/A10007/apply_forms?' + params.toString(), {
  method: 'GET',
  headers: {
    'X-CWF-API-Token': 'kH8ILqUBgKrDIBGqqWGgEYuLBC469W5MRuktp00I'
  }
}).then(response => {
  if (!response.ok) {
    // REST APIのエラーが発生した場合
    throw response;
  }
  // 申請フォームの一覧が正常に取得できた場合
  return response.json()
}).then(json => {
  return json.apply_forms.shift();
}).then(apply_form => {
  // 申請フォームID
  const applyFormId = apply_form.apply_form_id;
}).catch(handleError);

ヒント

GETメソッドでアクセスする際のパラメーターは[/users/A10007/apply_forms]に続けて[?]を追加し、[user_id=A10007&ogranization_code=…]のように指定します。

3. 申請フォーム(休暇届)を申請します。

POSTメソッドで[/documents/apply]へアクセスします。リクエストボディへ申請者の所属情報、申請フォームID、申請件名、申請フォームへの入力データ、申請オプションを設定します。正しく申請が行われると申請した案件の情報がレスポンスとして返されます。

const params = {
  'organization_code': organizationCode,
  'group_code': groupCode,
  'authority_code': authorityCode,
  'user_id': userId,
  'apply_form_id': applyFormId,
  'subject': '休暇届を申請します',
  'form_data': {
    'FROM': '2018/05/01',
    'TO': '2018/05/02',
    'NUM_DAYS': '2',
    'TYPE': '1',
    'REASON': '私用のため休暇届を申請します'
  },
  'options': {
    'comment': '出社は5/7(月)の予定です'
  }
};

fetch('http://localhost:8080/XFV20/api/documents/apply', {
  method: 'POST',
  headers: {
    'X-CWF-API-Token': 'kH8ILqUBgKrDIBGqqWGgEYuLBC469W5MRuktp00I',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(params)
}).then(response => {
  if (!response.ok) {
    // REST APIのエラーが発生した場合
    throw response;
  }
  // 休暇届の申請が正常に終了した場合
  return response.json()
}).then(json => {
  return json.documents.shift();
}).then(document => {
  // 案件ID
  const documentId = document.document_id;
}).catch(handleError);

以上でユーザー(A10007)から申請フォーム(休暇届)の申請が完了しました。

ヒント

POSTメソッドでアクセスする際のパラメーターはリクエストボディへJSONフォーマットで指定します。
JSONフォーマットを使用するためリクエストヘッダーから[Content-Type]として[application/json]を指定します。
画像フレームを利用する場合、BASE64形式で画像を指定します。

ソースコードのサンプル¶

サンプルデータのユーザー(A10007)の所属情報を取得して申請フォーム(休暇届)を申請するまでの完全なソースコードです。

// 例外ハンドル関数
const handleError = function(error) {
  if (typeof error.json === 'function') {
    // REST APIのエラーが発生した場合
    error.json().then(json => {
      console.log(json);
    });
  }
  else {
    // Fetch APIのエラーが発生した場合
    console.log(error);
  }
};

// 1. ユーザー(A10007)の所属情報を取得します。
fetch('http://localhost:8080/XFV20/api/users/A10007', {
  method: 'GET',
  headers: {
    'X-CWF-API-Token': 'kH8ILqUBgKrDIBGqqWGgEYuLBC469W5MRuktp00I'
  }
}).then(response => {
  if (!response.ok) {
    // REST APIのエラーが発生した場合
    throw response;
  }
  // ユーザーの所属情報が正常に取得できた場合
  return response.json()
}).then(json => {
  return json.users.shift();
}).then(user => {
  // 所属情報
  const belong = user.belongs.shift();

  // ユーザーのID
  const userId = user.user_id;
  // 組織コード
  const organizationCode = belong.organization_code;
  // グループコード
  const groupCode = belong.group_code;
  // 役職コード
  const authorityCode = belong.authority_code;

  // 2. ユーザー(A10007)の申請フォームの一覧を取得します。
  const params = new URLSearchParams({
    'user_id': userId,
    'organization_code': organizationCode,
    'group_code': groupCode,
    'authority_code': authorityCode,
    'form_name': '休暇届'
  });

  fetch('http://localhost:8080/XFV20/api/users/A10007/apply_forms?' + params.toString(), {
    method: 'GET',
    headers: {
      'X-CWF-API-Token': 'kH8ILqUBgKrDIBGqqWGgEYuLBC469W5MRuktp00I'
    }
  }).then(response => {
    if (!response.ok) {
      // REST APIのエラーが発生した場合
      throw response;
    }
    // 申請フォームの一覧が正常に取得できた場合
    return response.json()
  }).then(json => {
    return json.apply_forms.shift();
  }).then(apply_form => {
    // 申請フォームID
    const applyFormId = apply_form.apply_form_id;

    // 3. 申請フォーム(休暇届)を申請します。
    const params = {
      'organization_code': organizationCode,
      'group_code': groupCode,
      'authority_code': authorityCode,
      'user_id': userId,
      'apply_form_id': applyFormId,
      'subject': '休暇届を申請します',
      'form_data': {
        'FROM': '2018/05/01',
        'TO': '2018/05/02',
        'NUM_DAYS': '2',
        'TYPE': '1',
        'REASON': '私用のため休暇届を申請します'
      },
      'options': {
        'comment': '出社は5/7(月)の予定です'
      }
    };

    fetch('http://localhost:8080/XFV20/api/documents/apply', {
      method: 'POST',
      headers: {
        'X-CWF-API-Token': 'kH8ILqUBgKrDIBGqqWGgEYuLBC469W5MRuktp00I',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(params)
    }).then(response => {
      if (!response.ok) {
        // REST APIのエラーが発生した場合
        throw response;
      }
      // 休暇届の申請が正常に終了した場合
      return response.json()
    }).then(json => {
      return json.documents.shift();
    }).then(document => {
      // 案件ID
      const documentId = document.document_id;
    }).catch(handleError);
  }).catch(handleError);
}).catch(handleError);

ヒント

アクセス先のベースURLとAPIトークンは適切な値に変更してください。
WebブラウザのデベロッパーツールのConsoleへソースコードのサンプルを貼り付けることで動作を確認できます。