外部ライブラリを利用して、ポップアップメッセージを表示する
SweetAlert2 を利用して、ポップアップメッセージを表示します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
動作イメージ
利用するイベント・API
申請入力画面イベント（パーツ値変更イベント）
サンプルフォーム
パーツID | パーツタイプ | 項目名・値 | 補足 |
fidToastPosition | リストメニューパーツ | 上部：top 上部左：top-start 上部右：top-end 中央：center 中央左：center-start 中央右：center-end 下部：bottom 下部左：bottom-start 下部右：bottom-end |
|
カスタマイズコード
カスタマイズコードCopied!
(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
6. サンプルのカスタマイズコードをjsファイルに保存します。
7. 保存したファイルをアップロードします。
8. アプリ設定＞経路設定から、先のフォームを利用した経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. 申請画面が表示されます。
11. リストメニューパーツから、ポップアップ表示位置を選択します。
12. 選択した表示位置にポップアップが表示されます。
外部JavaScriptライブラリのURL指定について
以下の記事をご確認ください。
補足
表示位置
表示位置 は、以下の通りです。
position | 表示位置 |
top | 上部 |
center | 中央 |
bottom | 下部 |
top-start | 上部左 |
center-start | 中央左 |
bottom-start | 下部左 |
top-end | 上部右 |
center-end | 中央右 |
bottom-end | 下部右 |