外部APIを使ってランダム画像を取得し、表示する

ラベルパーツには、HTMLを記載することができます。
ここでは、ラベルパーツにあらかじめ画像表示用の要素を用意しておき、申請画面表示時にランダムで犬の画像を表示するサンプルを紹介します。
犬の画像は、外部のAPIを実行して取得します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

Dog API について

画像の表示には、Dog API を利用しています。

こちらのAPIは、当社のサービスではありません。
利用規約等の詳細については、Dog APIのサイトにてご確認ください。

利用するイベント・API

• 申請入力画面 - 表示イベント
• 外部のAPIを実行する

サンプルフォーム

パーツID	パーツタイプ	補足
fidImage	ラベルパーツ	画像表示用ラベルパーツ

カスタマイズコード

(function () {
  'use strict';

  collaboflow.events.on('request.input.show', function (e) {

    // see also
    // dog-api
    // https://dog.ceo/dog-api/documentation/
    const url = 'https://dog.ceo/api/breeds/image/random';

    const headers = {};
    const parseType = 'json';

    return collaboflow.proxy
      .get(url, headers, parseType)
      .then(function (response) {

        if (response.status !== 200) {
          throw Error(response.status_text);
        }

        if (response.body.status !== 'success') {
          throw Error(response.body.message);
        }

        // あらかじめラベルに設定した要素のIDを指定し、取得した画像を挿入する
        const dog_image = document.getElementById('dog_image');
        if (dog_image) {
          dog_image.insertAdjacentHTML('afterbegin', '<img src="' + response.body.message + '">');
        }
      })
      .catch(function (error) {
        console.error(error);
        alert(error.message);
      });

  });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
   
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されると、外部のAPIで取得した画像が表示されます。