spModal - クライアント

サービスポータルウィジェットにアラート、プロンプト、確認ダイアログを表示します。sPModal クラスは、サービスポータルのクライアントスクリプトで使用できます。

spModal.open() を使用して、モーダルダイアログにウィジェットを表示できます。spModal クラスは、Angular UI ブートストラップの $uibModal の軽量なラッパーです。

spModal - alert(文字列 message).then(fn)

アラートを表示します。

表 : 1. パラメーター

名前	タイプ	説明
message	文字列	表示するメッセージ。

表 : 2. 返される内容

タイプ	説明
ブーリアン	promise には、true または false を含む単一の引数が含まれています。

// HTML template 
<button ng-click="c.onAlert()" class="btn btn-default">
    Alert
  </button>

// Client script
function(spModal) {
    var c = this;
  c.onAlert = function () {
        spModal.alert('How do you feel today?').then(function (answer) {
            c.simple = answer;
        });
    }
 }

spModal - confirm(文字列 message).then(fn)

確認メッセージを表示します。

表 : 3. パラメーター

名前	タイプ	説明
message	文字列	表示するメッセージ。

表 : 4. 返される内容

タイプ	説明
ブーリアン	promise には、true または false を含む単一の引数が含まれています。

// HTML template 
 <button ng-click="c.onConfirm()" class="btn btn-default"> Confirm </button> 
<span>{{c.confirmed}}</span>   

// Client script
function(spModal) {
  var c = this;
  c.onConfirm = function() {
        c.confirmed = "asking";
        spModal.confirm("Can you confirm or deny this?").then(function(confirmed) {
            c.confirmed = confirmed; // true or false
        })
    }
 } 

次の HTML メッセージで確認します。

//HTML template 
<button ng-click="c.onConfirmEx()" class="btn btn-default">
    Confirm - HTML message
  </button>
  <span>{{c.confirmed}}</span>

// Client script
function(spModal) {
  var c = this;
  // more control, passing options
    c.onConfirmEx = function() {
        c.confirmed = "asking";
        var warn = '<i class="fa fa-warning" aria-hidden="true"></i>';
        spModal.open({
            title: 'Delete this Thing?',
            message: warn + ' Are you <b>sure</b> you want to do that?'
        }).then(function(confirmed) {
            c.confirmed = confirmed;
        })
    }
}

spModal - open(オブジェクト options).then(fn)

指定されたオプションを使用してモーダルウィンドウを開きます。

表 : 5. パラメーター

名前	タイプ	説明
オプション	オブジェクト	次のプロパティを持つオブジェクト。 背景:ブール|文字列。背景の存在をコントロールします。 有効な値： true:背景を表示します。 false:背景なし。 static:背景を選択してモーダルを閉じることを無効にします。 デフォルト：true buttons:アレイ。ダイアログに表示するボタン。デフォルトは [キャンセル] と [OK] です。 input:ブール。true の場合、ダイアログに入力フィールドを表示します。 デフォルト：false keyboard:ブール。true の場合、Esc キーを使用してダイアログを閉じることができることを示します。 デフォルト：true message:文字列。ヘッダーに入る HTML。 デフォルト：空 noDismiss:ブール。true の場合、[閉じる] アイコンを含むヘッダーセクションが存在することを示します。 デフォルト：false shared:クライアント側のオブジェクト。埋め込みウィジェットのクライアントスクリプトとデータを共有します。 size:文字列。ウィンドウのサイズ。有効な値:「sm」または「lg」。 デフォルト：空 title:文字列。ヘッダーに入る HTML。 デフォルト：空 値：文字列。入力フィールドの値。 デフォルト：空 widget:文字列。ダイアログに埋め込むウィジェット ID またはsys_id。 デフォルト：空 widgetInput:オブジェクト。埋め込みウィジェットに入力として送信されます。 デフォルト：null

表 : 6. 返される内容

タイプ	説明
なし

ラベル付きのプロンプトを作成する方法を次のコード例に示します。

//HTML template
<button ng-click="c.onOpen()" class="btn btn-default">
    Prompt with label
  </button>
  <div ng-show="c.name">
    You answered <span>{{c.name}}</span>
  </div>

//Client code
function(spModal) {
  var c = this;
  c.onOpen = function() {
        //ask the user for a string
        spModal.open({
            title: 'Give me a name',
            message: 'What would you like to name it?',
            input: true,
            value: c.name
        }).then(function(name) {
            c.name = name;
        })
    }
}

カスタム ボタン オプションを使用する方法を次のコード例に示します。

//HTML template
<button ng-click="c.onAgree()" class="btn btn-default">
    Agree
  </button>
  <div ng-show="c.agree">
    You answered {{c.agree}}
  </div>

//Client script
function(spModal) {
  var c = this;
  c.onAgree = function() {
        // ask the user for a string
        // note embedded html in message
        var h = '<h4>Apple likes people to agree to lots of stuff</h4>'
        // Line feeds added to the following lines for presentation formatting.
        var m = 'Your use of Apple software or hardware products is based 
on the software license and other terms and conditions in effect for the 
product at the time of purchase. Your agreement to these terms is required 
to install or use the product. '
        spModal.open({
            title: 'Do you agree?',
            message: h + m,
            buttons: [
                {label:'✘ ${No}', cancel: true},
                {label:'✔ ${Yes}', primary: true}
            ]
        }).then(function() {
            c.agree = 'yes';
        }, function() {
            c.agree = 'no';
        })
    }
}

次のコード例は、埋め込みウィジェットオプションの使用方法を示しています。

//HTML template
<button ng-click="c.onWidget('widget-cool-clock')" class="btn btn-default">
    Cool Clock
  </button>

//Client script
function(spModal) {
  var c = this;
  c.onWidget = function(widgetId, widgetInput) {
        spModal.open({
            title: 'Displaying widget ' + widgetId,
            widget: widgetId, 
            widgetInput: widgetInput || {}
        }).then(function(){
            console.log('widget dismissed');
        })      
    }
}

spModal：prompt(文字列 message, 文字列 default).then(fn)

ユーザー入力のプロンプトを表示します。

表 : 7. パラメーター

名前	タイプ	説明
message	文字列	表示するメッセージ。
default (オプション)	文字列	ユーザーが応答しない場合に使用するデフォルト値。

表 : 8. 返される内容

タイプ	説明
文字列	promise にはユーザーの応答が入ります。ユーザーが応答を入力しない場合はデフォルト値が入ります。

//HTML template
 <button ng-click="c.onPrompt()" class="btn btn-default">
    Prompt
  </button>
  <div ng-show="c.name">
    You answered <span>{{c.name}}</span>
  </div>

// Client script
function(spModal) {
  var c = this;
  c.onPrompt = function() {
        spModal.prompt("Your name please", c.name).then(function(name) {
            c.name = name;
        })
    }
}