外部APIを使ってランダム画像を取得し、表示する
ラベルパーツには、HTMLを記載することができます。
ここでは、ラベルパーツにあらかじめ画像表示用の要素を用意しておき、申請画面表示時にランダムで犬の画像を表示するサンプルを紹介します。
犬の画像は、外部のAPIを実行して取得します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
Dog API について
画像の表示には、 Dog API を利用しています。
こちらのAPIは、当社のサービスではありません。
利用規約等の詳細については、Dog APIのサイトにてご確認ください。
利用するイベント・API
申請入力画面イベント（表示イベント）
サンプルフォーム
パーツID | パーツタイプ | 補足 |
fidImage | ラベルパーツ | 画像表示用ラベルパーツ |
カスタマイズコード
カスタマイズコードCopied!
(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で取得した画像が表示されます。
