다음 코드 예제에서는 이 메서드를 호출하는 방법을 보여 줍니다.

function failure(data)
{
  console.log("failure: " + JSON.stringify(data));
}
 
function success(data)
{
  console.log("success: " + JSON.stringify(data));
}
 
openFrameAPI.getAWAAgentPresence(success, failure)

성공 콜백 함수에 대한 응답:

success: { 
  "presence": { 
    "name": "Available", 
    "sys_id": "0b10223c57a313005baaaa65ef94f970", 
    "available": true, 
    "channels": [ 
      { 
        "name": "Chat", 
        "available": true, 
        "sys_id": "27f675e3739713004a905ee515f6a7c3", 
        "restrict_update": false, 
        "service_channel_type": "chat" 
      } 
    ] 
  } 
}

openFrameAPI.hide()

var config = {
height: 300,
width: 200
}
function handleCommunicationEvent(context) {
console.log("Communication from Topframe", context);
}
function initSuccess(snConfig) {
console.log("openframe configuration", snConfig);
//register for communication event from TopFrame
openFrameAPI.subscribe(openFrameAPI.EVENTS.COMMUNICATION_EVENT,
handleCommunicationEvent);
}
function initFailure(error) {
console.log("OpenFrame init failed...", error);
}
openFrameAPI.init(config, initSuccess, initFailure);

function callback(isVisible) {
console.log(isVisible)
}
openFrameAPI.isVisible(callback)

openFrameAPI.openCustomURL('10_cool_things.do');

다음 예는 플랫폼의 기본 사용법을 보여줍니다.

openFrameAPI.openServiceNowForm({entity:'customer_account', 
query:'sys_id=447832786f0331003b3c498f5d3ee452', 'interaction_sys_id':'3be092313b711300758ce9b534efc4dd'});

다음 예제에서는 매개변수를 query 사용하여 sysparm_query 및 인코딩된 쿼리를 사용하여 작업 공간의 이름과 성 필드를 채우는 방법으로 양식에 제공된 데이터로 새 기록을 만드는 방법을 보여줍니다.

openFrameAPI.openServiceNowForm({ entity: 'sys_user',
query: 'sys_id=-1&sysparm_query=first_name=Ivan^last_name=Greggor' });

다음 예에서는 구성된 작업 공간에서 상위 엔터티를 상위 탭으로 열거나, UI16에서 호출되는 경우 엔터티만 엽니다.

openFrameAPI.openServiceNowFormwithChildTab({
  entity: "customer_account", 
  sys_id: "447832786f0331003b3c498f5d3ee452", 	
  parent_entity: "interaction", 
  parent_entity_sys_id: "3be092313b711300758ce9b534efc4dd"
});

openFrameAPI.openServiceNowList({entity:'case', query:'active=true'});

openFrameAPI.setFrameMode(openFrameAPI.FRAME_MODE.COLLAPSE);

openFrameAPI.setHeight(100);

다음 코드 예제에서는 활성 상태 컨텍스트를 설정하는 방법을 보여 줍니다.

openFrameAPI.setICContext("activeCall", {
  "activeCall": [
    { 
      "nowRecordTable": "interaction",
      "nowRecordId": "12345675678903456",
      "externalId": "1234567890",
      "type": "call",
      "direction": "inbound",
      "currentParticipant": {
        "id": "participant1",
        "name": "John 1",
        "actor": "agent",
        "state": "connected",
        "connectedTime": "Fri, 12 Jul 2024 05:23:41 GMT",
        "callStartTime": "Fri, 12 Jul 2024 04:20:22 GMT",
        "muted": false,
        "held": true,
        "paused": true,
        "flagged": true,
        "recording": "in_progress",
        "capabilities": {
          "hold": false,
          "mute": true,
          "endCall": true,
          "startRecording": true,
          "pauseRecording": true,
          "stopRecording": true,
          "resumeRecording": true,
          "transfer": true,
          "mergeCall": true,
          "leaveAndTransfer": true,
          "dtmf": true,
          "flag": true
        }
      },
      "participants": [
        {
          "id": "customer1",
          "name": "Gilly 1",
          "actor": "customer",
          "address": "+18582359874",
          "ani": "+16193287356", 
          "dnis": "+18004346258",
          "state": "connected",
          "connectedTime": "Fri, 12 Jul 2024 00:23:41 GMT",
          "callStartTime": "Fri, 12 Jul 2024 20:55:04 GMT",
          "muted": false,
          "held": false,
          "heldAtTime": "Fri, 12 Jul 2024 20:55:04 GMT", 
          "capabilities": {
            "mute": true,
            "hold": true,
            "endCall": true
          }
        },
        {
          "id": "agent2",
          "name": "Ned",
          "actor": "agent",
          "address": "+3134787324",
          "ani": "+13134787324", 
          "dnis": "+14773286943",
          "state": "Ringing...",
          "requireWrapup": true,
          "requestACW": true,
          "connectedTime": "Fri, 12 Jul 2024 20:24:41 GMT",
          "callStartTime": "Fri, 12 Jul 2024 20:56:34 GMT",
          "muted": true,
          "held": true,
          "heldAtTime": "Fri, 12 Jul 2024 20:55:41 GMT",
          "capabilities": {
            "mute": true,
            "endCall": true,
            "hold": true 
          }
        }
      ]
    },
    {
      "nowRecordTable": "interaction",
      "nowRecordId": "12345yhedfh534576u5",
      "externalId": "1234567890",
      "type": "call",
      "direction": "inbound",
      "currentParticipant": {
        "id": "participant1",
        "name": "John 1",
        "actor": "agent",
        "state": "connected",
        "muted": true,
        "held": false,
        "recording": "in_progress",
        "paused": true,
        "flagged": true,
        "capabilities": {
          "hold": false,
          "mute": true,
          "endCall": true,
          "record": true,
          "startRecording": true,
          "stopRecording": true,
          "transfer": true,
          },
          "mergeCall": false,
          "dtmf": true,
          "flag": true
        }
      },
      "participants": [
        {
          "id": "customer1",
          "name": "Gilly 2",
          "actor": "customer",
          "address": "+123456789",
          "state": "connected",
          "connectedTime": "Wed, 04 Dec 2024 00:23:41 GMT",
          "muted": true,
          "held": false,
          "heldAtTime": "Fri, 12 Jul 2024 20:24:41 GMT”,
          "capabilities": {
            "mute": true,
            "hold": true,
            "endCall": true
          }
        },
        {
          "id": "agent2",
          "name": "Ned 2",
          "actor": "agent",
          "address": "+123456789",
          "state": "Ringing...",
          "connectedTime": "Fri, 12 Jul 2024 20:24:41 GMT",
          "muted": true,
          "held": true,
          "heldAtTime": "Fri, 12 Jul 2024 20:24:41 GMT”,
          "capabilities": {
            "mute": true,
            "endCall": true,
            "hold": true
          }
        }
      ]
     }
    ]
  }
);

다음 예제에서는 유휴 상태 컨텍스트를 설정하는 방법을 보여줍니다.

openFrameAPI.setICContext("idleState", {
  "capability": {
    "outBoundCall": true,
    "logOut": true 
  },
  "enableState": {
    "outBoundCall": true,
    "logOut": true
  },
  "dialpadInfoMessage": {
    "label": "Info Message Label",
    "value": "Info Message Value"
  },
  "currentInboundId": "1234"
});

다음 예시에서는 검색 대상 목록 컨텍스트를 설정하는 방법을 보여줍니다.

openFrameAPI.setICContext("searchTargetList",
  {
    "searchTargetList": [
      {
        "nowRecordTable": "interaction",
        "nowRecordId": "1234",
        "externalId": "5678",
        "participantID": "participant1”,
        “targetTypes”: [“agent”, “queue”],
        "targets": [
          {
            "type": "agent",
            "transferSubtypes": [
              {
                "id": "consult",
                "label": "Consult"
              },
              {
                "id": "blind",
                "label": "Blind"
              }
            ],
            "payload": {
              "list": [
                {
                  "name": "John Jason",
                  "id": "agent1Id",
                  "hasStats": true,
                  "presence": "away",
                  "moreInfo": [
                    {
                      "label": "Skill",
                      "value": "10sec"
                    }
                  ]
                }
              ]
            }
          },
          {
            "type": "queue",
            "transferSubtypes": [
              {
                "id": "consult",
                "label": "Consult"
              },
              {
                "id": "blind",
                "label": "Blind"
              }
            ],
            "payload": {
              "list": [
                {
                  "name": "Product Support Queue",
                  "id": "queue1Id",
                  "hasStats": true,
                  "moreInfo": [
                    {
                      "label": "Skill",
                      "value": "10sec"
                    },
                    {
                      "label": "Queue Skill",
                      "value": "German"
                    }
                  ]
                },
                {
                  "name": "Billing Queue",
                  "id": "queue2Id",
                  "hasStats": true,
                  "moreInfo": [
                    {
                      "label": "Skill",
                      "value": "10sec"
                    }
                  ]
                }
              ]
            }
          }
        ],
        "customPayload": {}
      }
    ],
    "customPayload": {}
  });

다음 예제에서는 offerContext 속성을 사용하여 복원력 통화 응답 상세 정보를 설정하는 방법을 보여줍니다.

// Set offerContext
openFrameAPI.setICContext('offerContext', offerContext);

var offerContext = {
  "offerContext": [
    {
      "nowRecordTable": "interaction",
      "type": "phone",
      "externalId": "1234567890",
      "externalSegmentId": "12345yhedfh534576u5",
      "queueId": "10111ad087063250df52fe66cebb3520",
      "creationTime": "19-12-2025 11:23:45",
      "requesterId": "4085018550",
      "assignment": {
        "offeredOn": "Fri, 19-12-2025  13:07:59",
        "timeout": "4000",
        "allowedToDecline": true,
        "enableAutoAssign": true
      },
      "displayContent": {
        "title": "Phone",
        "displayContent1": "Abel Tuter",
        "displayContent2": "Priority - 4-Low",
        "displayContent3": "category - Product Issue"
      }
    }
  ]
};

openFrameAPI.setIcons([{imageURL:'https://mydomian.com/image/mute.png',
imageTitle:'mute', id:101}, {imageURL:'https://mydomian.com/image/hold.png',
imageTitle:'hold', id:102}]);

openframeAPI.setPresenceIndicator('Available', 'green');

openFrameAPI.setSize(300, 370);

openFrameAPI.setSubtitle('+18888888888');

openFrameAPI.setTitle('Incoming Call');

openFrameAPI.setTitleIcon({imageURL:'/my/image/path.png', imageTitle:'mute', id:101});

openFrameAPI.setTitleIcon({imageURL:'https://mydomian.com/image/path.png',
imageTitle:'mute', id:101});

이 예시에서는 정보, 경고 및 오류 메시지를 표시합니다.

openFrameAPI.toastMessage("Testing info message", "info", 10000); //display for 10 seconds
openFrameAPI.toastMessage("Testing warning message", "warning"); //display until manually closed
openFrameAPI.toastMessage("Testing error message", "error");

openFrameAPI.setWidth(100);

openFrameAPI.show()

다음 코드 예제에서는 openframe_awa_agent_presence 이벤트에 대해 이 메서드를 호출하는 방법을 보여 줍니다.

function handleIconClick(context) {
console.log("Icon was clicked", context);
}
openFrameAPI.subscribe(openFrameAPI.events.openframe_awa_agent_presence, handleIconClick);

출력:

// Sample presence object output
// openframe_awa_agent_presence event only

{
  "result":{
    "presence":{
      "name":"Available",
      "sys_id":"27f675e3739713004a905ee515f6a7c3",
      "available":true,
      "channels":[
        {
          "name":"Chat",
          "available":true,
          "sys_id":"36f675e4239713124a905fe515f6a832",
          "restrict_update":false
        },
        {
          "name":"Phone",
          "available":true,
          "sys_id":"9378a530a1820610f809018efd9bc01e",
          "restrict_update":false
        }
      ]
    }
  }
}

다음 코드 예제에서는 openframe_awa_workitem_accepted 이벤트에 대해 이 메서드를 호출하는 방법을 보여 줍니다.

function handleIconClick(context) {
console.log("Icon was clicked", context);
}
openFrameAPI.subscribe(openFrameAPI.events.openframe_awa_workitem_accepted, handleIconClick);

출력:

// Sample workItem object output
// openframe_awa_workitem_accepted event only
{
  "result": {
    "workItem": {
      "sys_id": "14c86c40a1650610f87701807d9bc0be",
      "size": 1,
      "serviceChannel": {
        "name": "Chat",
        "sys_id": "27f675e3739713004a905ee515f6a7c3"
      },
      "document": {
        "sys_id": "aa582040a1650610f87701807d9bc076",
        "table": "interaction"
      },
      "previousWorkItem": "7c78a440a1650610f87701807d9bc02b",
      "isQueueTransferred": true,
      "isAutoAccepted": true
    }
  }
}

다음 코드 예제에서는 openframe_awa_workitem_rejected 이벤트에 대해 이 메서드를 호출하는 방법을 보여 줍니다.

function handleIconClick(context) {
console.log("Icon was clicked", context);
}
openFrameAPI.subscribe(openFrameAPI.events.openframe_awa_workitem_rejected, handleIconClick);

출력:

// Sample workItem object output
// openframe_awa_workitem_rejected event only
{
  "payload": {
    "workItem": {
      "sys_id": "2c3bdc4824250610f8775e73b116f8de",
      "size": "1",
      "serviceChannel": {
        "name": "Chat",
        "sysID": "27f675e3739713004a905ee515f6a7c3"
      },
      "document": {
        "sys_id": "cf0a180824250610f8775e73b116f80c",
        "table": "interaction"
      },
      "rejection": {
        "reason": "Busy",
        "sys_id": "4e93fa29b38023002e7b6e5f26a8dc20"
      },
      "previousWorkItem": "831b9c4824250610f8775e73b116f841",
      "isQueueTransferred": true
    }
  }
}

다음 예는 이벤트를 구독 interaction_control_action 하는 방법을 보여줍니다.

openFrameAPI.subscribe("interaction_control_action", function(action) {
    // Can perform the action based on the name
    if (action.name == "mute") {
        mute();
        openFrameAPI.setICContext("activeCall", context); // Update context representing the change
    } else if (action.name == "getSearchTarget") {
        action.payload.searchType == "queue" ? fetchQueueTransferList(action.payload.searchTerm) : fetchAgentTransferList(action.payload.searchTerm);
        openFrameAPI.setICContext("searchTargetList", context); // Call context will have the transfer list
    } else if (action.name == "logout") {
        logout();
        openFrameAPI.showIframe(); // Show iframe api
    }
});

var version = openFrameAPI.version();

console.log("API version " + version);