外部ライブラリを利用して、ポップアップメッセージを表示する

SweetAlert2を利用して、ポップアップメッセージを表示します。

サンプルについて

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

動作イメージ

利用するイベント・API

• 申請入力画面イベント - パーツ値変更イベント

サンプルフォーム

パーツID	パーツタイプ	項目名・値	補足
fidToastPosition	リストメニューパーツ	上部：top 上部左：top-start 上部右：top-end 中央：center 中央左：center-start 中央右：center-end 下部：bottom 下部左：bottom-start 下部右：bottom-end

カスタマイズコード

(function () {
  'use strict';

  collaboflow.events.on('request.input.fidToastPosition.change', function (data) {

    const positionMap = {
      '上部':'top',
      '上部左':'top-start',
      '上部右':'top-end',
      '中央':'center',
      '中央左':'center-start',
      '中央右':'center-end',
      '下部':'bottom',
      '下部左':'bottom-start',
      '下部右':'bottom-end',
    };

    const parts = data.parts;
    const positionKey = parts['fidToastPosition'].value;

    const toast = Swal.mixin({
      toast: true,
      position: positionMap[positionKey],
      showConfirmButton: false,
      timer: 2000,
      timerProgressBar: true
    });

    toast.fire({
      icon: 'success',
      title: positionKey
    });

  });

})();

動作の確認手順

1. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
2. サンプルフォームに、先で記載されている必要項目を配置します。
3. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
4. URL指定をクリックします。
5. 以下のURLを指定し、追加アイコンをクリックします。
   https://cdn.jsdelivr.net/npm/sweetalert2@11.6.15/dist/sweetalert2.all.min.js
   参考：sweetalert2 - usage
6. サンプルのカスタマイズコードをjsファイルに保存します。
7. 保存したファイルをアップロードします。
8. アプリ設定＞経路設定から、先のフォームを利用した経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. 申請画面が表示されます。
11. リストメニューパーツから、ポップアップ表示位置を選択します。
12. 選択した表示位置にポップアップが表示されます。

外部JavaScriptライブラリのURL指定について

以下の記事をご確認ください。

• 外部JavaScriptライブラリのURL指定

補足

表示位置

表示位置は、以下の通りです。

position	表示位置
top	上部
center	中央
bottom	下部
top-start	上部左
center-start	中央左
bottom-start	下部左
top-end	上部右
center-end	中央右
bottom-end	下部右