spModal - クライアント

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

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

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. パラメーター

名前	タイプ	説明
オプション	オブジェクト	次のプロパティを持つオブジェクト。 backdrop: ブール値|糸。背景の有無をコントロールします。 有効な値： true:背景を表示します。 false:背景なし。 static:背景を選択してモーダルを閉じるのを無効にします。 デフォルト：true buttons: 配列。ダイアログに表示するボタン。デフォルトは [キャンセル] と [OK] です。 入力:ブール値。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;
        })
    }
}