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 - 열기(객체 옵션).then(fn)

지정된 옵션을 사용하여 모달 창을 엽니다.

표 5. 매개변수

이름	유형	설명
옵션	객체	이러한 속성을 가질 수 있는 객체입니다. 배경: 부울|문자열. 배경의 존재 여부를 통제합니다. 유효한 값은 다음과 같습니다. true: 배경을 표시합니다. false: 배경이 없습니다. static: 배경을 선택하여 모달 닫기를 비활성화합니다. 기본값: true 버튼: 배열. 대화 상자에 표시할 버튼입니다. 기본값은 취소 및 확인입니다. 입력: 부울. 예일 경우 대화 상자에 입력 필드가 표시됩니다. 기본값: false keyboard: 부울. 예일 때는 ESC 키를 사용하여 대화 상자를 닫을 수 있음을 나타냅니다. 기본값: true message: 문자열. 헤더에 들어가는 HTML입니다. 기본값: 비어 있음 noDismiss: 부울. 예일 때는 닫기 아이콘이 포함된 헤더 섹션이 있음을 나타냅니다. 기본값: false shared: 클라이언트 쪽 객체입니다. 포함된 위젯 클라이언트 스크립트와 데이터를 공유합니다. size: 문자열. 창의 크기입니다. 유효한 값은 'sm' 또는 'lg'입니다. 기본값: 비어 있음 title: 문자열. 헤더에 들어가는 HTML입니다. 기본값: 비어 있음 value: 문자열. 입력 필드의 값입니다. 기본값: 비어 있음 위젯: 문자열. 대화 상자에 포함할 위젯 ID 또는 sys_id입니다. 기본값: 비어 있음 widgetInput: 객체입니다. 포함된 위젯에 입력으로 전송됩니다. 기본값: null

표 6. 반환

유형	설명
void

다음 코드 예제에서는 레이블이 있는 프롬프트를 만드는 방법을 보여 줍니다.

//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. 매개변수

이름	유형	설명
메시지	문자열	표시할 메시지입니다.
기본값(선택 사항)	문자열	사용자가 응답을 제공하지 않는 경우 사용할 기본값입니다.

표 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;
        })
    }
}