アニメーションやスタイル付きのダイアログメッセージの作成

Last updated
Save as PDF

この記事は、OutSystems MVPである Rúben Bonito氏により執筆されました。

この記事では、OutSystemsのリアクティブWebアプリにアニメーションやスタイル付きのダイアログメッセージを実装する方法について説明します。

以下の手順を実行します。

Scriptsフォルダを右クリックして［Import Script］を選択し、2つのJavaScriptライブラリ（promisepolyfillとsweetalert2_min）をOutSystemsアプリケーションにアップロードします。
ブロックをエディタ領域にドラッグして作成します。
ブロックの高度なプロパティに移動し、ライブラリと同じソースから提供されているスタイルシートを貼り付けます。

「On Render」イベントで、クライアントアクションを関連付けて以下のJavaScriptコードを実行します。

var latetoast = sessionStorage.getItem("latetoast");

if (latetoast === "True") {
    sessionStorage.setItem("latetoast", "False");
    //
    swal({
        title: sessionStorage.getItem("IN_title"),
        text: sessionStorage.getItem("IN-text"),
        allowOutsideClick: false,
        allowEscapeKey: false,
        allowEnterKey: false;
        showConfirmButton: false,
        showCancelButton: false,
        timer: sessionStorage.getItem("IN_timeout"),
        toast: true,
        type:sessionStorage.getItem("IN_type"),
        Position:'center'
    });
}

ブロックをアプリケーションのレイアウトヘッダーにドラッグします。

ここでは手順を短くするため、最も複雑なタイプのダイアログメッセージである確認ダイアログメッセージの実装についてのみ説明します。その他のタイプの実装プロセスは、いずれも手順がよく似ているかこれよりも簡単です。
以下の図に表示されている入力をすべて備えたクライアントアクションを作成します。

アクションフロー内でJSノードを追加し、以下のコードを使用してJavaScriptを実行します。

swal({
    type:$parameters.IN_type,
    title:$parameters.IN_title,
    text:$parameters.IN_text,

    showCancelButton: true,
    reverseButtons: false,
    cancelButtonColor:'#d33',
    cancelButtonText:$parameters.IN_cancelTxt,
    cancelButtonClass:$parameters.IN_cancelClass,
    confirmButtonClass:$parameters.IN_confirmClass,
    confirmButtonColor:'#3085d6',
    confirmButtonText:$parameters.IN_confirmTxt,
    buttonsStyling: false,
}).then(function (result) {
    if (result.value) {
        document.getElementById($parameters.IN_InputId,).value = "True";
    } else {
        document.getElementById($parameters.IN_InputId,).value = "False";
    }
    document.getElementById($parameters.IN_InputId,).change();
});

ユーザーがクリックすると画面アクションを実行するボタンを画面に作成します。

この画面アクションにはConfirmation Dialogクライアントアクション（手順6で作成したもの）が含まれ、入力を以下のように入力する必要があります。

最後にアプリケーションをパブリッシュします。確認ボタンをクリックすると以下のような結果になります。

この実装は、再利用可能なコンポーネントとしてForgeで提供されています。

Training

Documentation