コラボフローの申請書に埋め込みする！

昨年に引き続き、今年もやっています！
「コラボフロー Advent Calendar 2023」19日目です✨✨

最近初めてインフルエンザになりまして、あまりの関節の痛さに身動きが取れませんでした😭
今年は病気をたくさんしたので、来年はぜひとも健康でいたいものです…😭

さて、今回はコラボフローの申請書に「埋め込み」をしてみたいと思います！

申請書に埋め込みをする

試しに、グーグルマップでやってみたいと思います！

1. グーグルマップで任意の場所を検索し、共有＞地図を埋め込む から、HTMLをコピーします。
   

2. コラボフローのフォーム編集でラベルパーツを配置します。

3. 配置したラベルパーツを開き、手順1でコピーしたHTMLをラベル内容に貼り付けます。
   

4. 作成したフォームで経路を作成します。

5. 作成した経路を新規文書から開くと、地図が表示されます。
   

申請時に埋め込み画像をする

以下を参考にして、申請入力画面でYouTubeの埋め込みを表示して遊んでみます。
外部APIを使ってランダム画像を取得し、表示する

1. YouTubeのお好きな画像を開き、共有＞埋め込む から、HTMLをコピーします。
   

2. コラボフローのフォーム編集でテキスト1行パーツ（パーツID:fidHtml）と、ラベルパーツを配置します。

3. 配置したラベルパーツを開き、ラベル内容を <div id="embeddedDisplay"></div> とします。
   

4. 以下コードをJSファイルに保存し、フォーム編集＞カスタマイズから、アップロードします。

   (function () {
       'use strict';
   
       collaboflow.events.on('request.input.fidHtml.change', function (data) {
   
           const parts = data.parts;
           const embeddedHtml = parts['fidHtml'].value;
   
           const embeddedDisplay = document.getElementById('embeddedDisplay');
   
           if (embeddedDisplay) {
               embeddedDisplay.innerHTML = '';
               embeddedDisplay.insertAdjacentHTML('afterbegin', embeddedHtml);
           }
       });
   })();
   

5. 作成したフォームで経路を作成します。

6. 作成した経路を新規文書から開き、テキスト1行パーツに手順1でコピーしたHTMLを貼り付けると、YouTubeが表示されます。
   　

おわり

色々な埋め込み試してみてください！
20日目は @taroyamada5963 さんです✨