spModal :クライアント

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

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

spModal - alert(文字列メッセージ).then(fn)

アラートを表示します。

表 : 1. パラメーター

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

表 : 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(文字列メッセージ).then(fn)

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

表 : 3. パラメーター

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

表 : 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(オブジェクトオプション).then(fn)

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

表 : 5. パラメーター

名前	タイプ	説明
オプション	オブジェクト	次のプロパティを持つ可能性があるオブジェクト。 背景:ブーリアン|文字列。背景の有無をコントロールします。 有効な値： true:背景を表示します。 false:背景なし。 static:背景を選択してモーダルを閉じないようにします。 デフォルト：true buttons:アレイ。ダイアログに表示するボタン。デフォルトは [キャンセル] および [OK] です。 入力:ブーリアン。true の場合、ダイアログに入力フィールドが表示されます。 デフォルト値：false keyboard:ブーリアン。true の場合、ダイアログは ESC キーを使用して閉じられることを示します。 デフォルト：true メッセージ:文字列。ヘッダーに格納する HTML。 デフォルト:空 noDismiss:ブーリアン。true の場合、閉じるアイコンを含むヘッダーセクションが存在することを示します。 デフォルト値：false shared:クライアント側のオブジェクト。埋め込みウィジェットクライアントスクリプトとデータを共有します。 size:文字列。ウィンドウのサイズ。有効な値:「sm」または「lg」。 デフォルト:空 title:文字列。ヘッダーに格納する HTML。 デフォルト:空 値:文字列。入力フィールドの値。 デフォルト:空 ウィジェット:文字列。ダイアログに埋め込むウィジェット 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(文字列メッセージ、文字列のデフォルト).then(fn)

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

表 : 7. パラメーター

名前	タイプ	説明
メッセージ	文字列	表示するメッセージ。
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;
        })
    }
}