보기에서 사용할 수 있는 JavaScript API

다음 참조 정보를 사용하여 보기에서 사용할 수 있는 JavaScript API에 대해 알아보십시오.

다음 보기 API 및 시나리오는 Application Designer에만 해당합니다. 기존 워크플로우 기능에서 Application Designer와 Process Designer 간에 공유되는 보기 API 목록은 API 참조를 참조하십시오.

보기에서 기타 오퍼링 서비스로 xhr 요청을 작성해야 하는 경우, 상호 도메인 보안 보호로 인해 보기 컨텍스트 오브젝트에서 사용 가능한 rewriteURI 메소드를 사용하여 xhr 연결 문자열을 다시 작성해야 합니다. rewriteURI는 연결 문자열에 Application Engine Proxy 연결 정보를 추가합니다. 연결 문자열이 업데이트된 보기에서 xhr 요청을 전송하면, 요청은 Application Engine Proxy로 전송됩니다. 프록시는 애플리케이션 자원에서 오퍼링을 검색하고 사용자 요청을 오퍼링 서비스로 라우트합니다. 오퍼링 서비스에 대한 애플리케이션 자원을 정의하고 애플리케이션 자원의 이름을 rewriteURI API로 전달해야 합니다. 애플리케이션 자원이 정의되지 않았거나 찾을 수 없으면, Application Engine Proxy는 요청을 라우트하지 않고 보기에 오류를 리턴합니다.

또한 문서를 표시하는 애플리케이션은 getAddressableUrl을 사용하여 사용자에게 현재 문서를 표시하는 공유 가능한 링크를 제공할 수 있습니다. 그런 다음, 공유 링크 사용 시 subscribeAppState를 사용하여 해당 문서를 자동으로 표시할 수 있습니다.

표 1. JavaScript 함수입니다.
함수 설명
context.rewriteURI(uri, ' resourceName' , ' resourceKeySuffix' ) 이 API는 백엔드 서버로 REST API 호출을 작성하는 프록시 URI 문자열을 리턴합니다. 프록시 또는 resourceName이 정의되지 않으면 원래 URI가 리턴됩니다.
{string} uri
오퍼링 서비스 URI.
{string} resourceName
오퍼링 서비스의 애플리케이션 자원 이름
{string} resourceKeySuffix
애플리케이션 자원에서 정의되는 공통 그룹 키에 추가되어 자원 세트에서 단일 자원을 동적으로 식별합니다. 애플리케이션 자원의 "레지스트리 검색" 유형에만 해당합니다.
context.getCSRFTokenHeaderName() 교차 사이트 요청 위조에 대한 HTTP 헤더 이름을 리턴합니다.
context.getCSRFToken() 이 값이 "정의되지 않음"이 아닌 경우 헤더를 설정하면 이후 모든 HTTP 요청에서 사용할 CSRF(Cross Site Request Forgery) 토큰 값을 리턴합니다.
context.loadFile(file, ' callback) DocumentFile 비즈니스 오브젝트로의 파일 로딩을 처리합니다.
{file} file
파일 오브젝트.
{function} callback
로딩이 완료되었을 때 호출하는 함수입니다. 콜백 함수에는 단일 매개변수가 있습니다. DocumentFile 비즈니스 오브젝트.
다음 샘플 코드는 이 API를 사용하는 방법을 보여줍니다.
var fileInput = this.context.element.getElementsByTagName("input")[0];
var onChangeHandle = connect.connect(fileInput, "onchange", this, function (event) {
  var context = this.context;
  var files = event.target.files;
  var file = files[0];
  if (file) {
    context.loadFile(file, function (docFile) {
      context.binding.set("value", docFile);
    });
  }
});
context.getAddressableUrl(appState, ' withPageId) 선택적 애플리케이션 상태가 URL에 추가된 애플리케이션의 URL을 리턴합니다. 사용자가 URL을 사용하여 애플리케이션으로 돌아가면 애플리케이션의 시작 페이지로 돌아갑니다.
{object} appState(선택사항)
애플리케이션 상태 정보가 애플리케이션 URL에 추가됩니다. 이는 올바른 JSON 직렬화 오브젝트 또는 배열이어야 합니다.
{boolean} withPageId(선택사항)
애플리케이션의 URL을 현재 페이지의 ID와 함께 리턴할지 여부를 지정합니다(선택사항, 기본값: false). withPageId=true(으)로 getAddressableUrl을 호출할 때 페이지가 시작 페이지로 호출될 수 있는지 확인하십시오. 주소 지정 가능한 URL을 사용하여 페이지로 돌아갈 때 페이지로 연결되는 플로우의 모든 단계가 호출되지 않습니다.
context.subscribeAppState (callback) 애플리케이션 상태와 연관된 알림을 수신하는 콜백 함수를 등록합니다. 콜백 함수는 보기의 로드 또는 보기 이벤트 핸들러에 등록되어야 합니다.
{function} callback
페이지 초기화 후 호출할 함수. 콜백 함수에는 context.getAddressableUrl 호출에 전달된 오브젝트인 appState(이)라는 단일 매개변수가 있습니다. 그런 다음 콜백이 appState의 정보를 활용하여 애플리케이션을 해당 상태로 되돌릴 수 있습니다.
context.isWorkflowPXServer() 서버가 Workflow Process Service Server인지 여부를 확인합니다. 애플리케이션 보기의 경우 항상 false를 리턴합니다.

샘플: Watson 변환 서비스에 연결

  1. "정의된 엔드포인트" 애플리케이션 자원을 작성하십시오. 예: watson. 그런 다음 애플리케이션 자원에 호스트, 포트 및 인증 정보를 추가하십시오.
  2. 다음 샘플 코드를 사용하여 보기에서 xhr 요청을 전송하십시오.
    var pillarStr = "watson";
var connectionStr = "/language-translator/api/v3/translate?version=2018-05-01";
connectionStr = this.context.rewriteURI(connectionStr, pillarStr);

xhr.open("POST", connectionStr, true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");

// set CSRF Token
xhr.setRequestHeader(this.context.getCSRFTokenHeaderName(), this.context.getCSRFToken());

var _this = this;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log("response translation: ", json.translations[0].translation);
console.log("response: ", json);
} else {
console.log("post request problem: " + xhr.readyState);
console.log("post request problem: " + xhr.status);
}
};
var senddata =
{text: this.context.binding.get("value"),
source: this.context.options.fromLang.get("value").name,
target: this.context.options.toLang.get("value").name
};
// Add JSON body

xhr.send(JSON.stringify(senddata));