1. JS 파일의 비동기 작업에 대한 사용자 지정 함수 작성
- 비동기 함수 호출 규칙 유형을 선택하면 양식의 규칙 편집기에 반환 형식이
Promise
인 함수만 표시됩니다. - 사용자 지정 기능을 만드는 방법에 대해 알아보려면 핵심 구성 요소를 기반으로 하는 적응형 양식에 대한 사용자 지정 기능 만들기 문서를 참조하십시오.
matchOTP()
함수는 사용자 지정 함수로 구현됩니다. 사용자 지정 함수의 JS 파일에 아래 코드가 추가됩니다.
/**
* generates the otp for success use case
* @param {string} otp
* @return {PROMISE}
*/
function matchOTP(otp) {
return new Promise((resolve, reject) => {
// Perform some asynchronous operation here
asyncOperationForOTPMatch(otp, (error, result) => {
if (error) {
// On failure, call reject(error)
reject(error);
} else {
// On success, call resolve(result)
resolve(result);
}
});
});
}
/**
* generates the otp
*/
function asyncOperationForOTPMatch(otp, callback) {
setTimeout(() => {
if(otp === '111') {
callback( null, {'valid':'true'});
} else {
callback( {'valid':'false'}, null);
}
}, 1000);
}
이 코드는 OTP(일회용 암호)의 유효성을 비동기적으로 확인하는 약속을 생성하는 함수 matchOTP()
을(를) 정의합니다. 함수 asyncOperationForOTPMatch()
을(를) 사용하여 OTP 일치 프로세스를 시뮬레이션합니다. 함수는 제공된 OTP가 111
과(와) 같은지 확인합니다. 입력한 OTP가 올바르면 오류에 대해 null이 있는 콜백을 호출하고 OTP가 유효함을 나타내는 개체는 ({'valid':'true'})
입니다. OTP가 유효하지 않으면 오류 개체가 ({'valid':'false'})
이고 결과에 대해 null이 있는 콜백을 호출합니다.
2. 규칙 편집기에서 비동기 기능 구성
규칙 편집기에서 비동기 기능을 구성하려면 다음 단계를 수행하십시오.
2.1 비동기 함수 호출 규칙 유형을 사용하여 비동기 함수를 사용할 규칙을 만듭니다.
비동기 작업을 사용할 규칙을 만들려면 비동기 함수 호출 규칙 유형을 사용하십시오. 다음 단계를 수행하십시오.
- 작성 모드에서 적응형 양식을 열고 양식 구성 요소를 선택한 다음 규칙 편집기 를 선택하여 규칙 편집기를 엽니다.
- 만들기 를 선택합니다.
- 단추 클릭에 대한 규칙의 When 섹션에 조건을 만듭니다. 예를 들어 When[Confirm] 을 클릭합니다.
- Then 섹션의 작업 선택 드롭다운 목록에서 비동기 함수 호출 을 선택합니다.
비동기 함수 호출 을(를) 선택하면Promise
반환 형식의 함수가 나타납니다. - 목록에서 비동기 함수를 선택합니다. 예를 들어
Add success callback
및add failure callback
이(가) 나타나므로matchOTP()
함수와 해당 콜백을 선택하십시오. - 이제 입력 바인딩을 선택하십시오. 예를 들어 입력 을(를)
Form Object
(으)로 선택하고OTP
필드와 비교합니다.
아래 스크린샷에는 규칙이 표시됩니다.
이제 matchOTP
함수에 대한 콜백 Success
및 Failure
의 구현을 계속할 수 있습니다.
2.2 비동기 함수에 대한 콜백을 구현합니다
시각적 규칙 편집기를 사용하여 비동기 함수에 대한 성공 및 실패 콜백 메서드를 구현합니다.
Add Success callback
메서드에 대한 규칙을 만듭니다
OTP가 값 111
과(와) 일치하는 경우 userdetails
패널을 표시하는 규칙을 만들어 보겠습니다.
-
성공 콜백 추가 를 클릭합니다.
-
문 추가 를 클릭하여 규칙을 만듭니다.
-
규칙의 When 섹션에 조건을 만듭니다.
-
함수 출력 > 이벤트 페이로드 가져오기 를 선택합니다.
노트
이벤트 페이로드 가져오기 함수는 사용자 상호 작용을 동적으로 관리하기 위해 특정 이벤트와 관련된 데이터를 검색합니다. -
입력 섹션에서 해당 바인딩을 선택합니다. 예를 들어 문자열 을(를) 선택하고
valid
을(를) 입력합니다. 입력한 문자열을true
과(와) 비교합니다. -
Then 섹션의 작업 선택 드롭다운 목록에서 표시 를 선택합니다. 예를 들어
userdetails
패널을 표시합니다. -
문 추가 를 클릭합니다.
-
작업 선택 드롭다운 목록에서 숨기기 를 선택합니다. 예를들어
error message
텍스트 상자를 숨깁니다. -
완료 를 클릭합니다.
사용자가 OTP를 111
(으)로 입력하고 Confirm
단추를 클릭하면 User Details
패널이 표시되는 아래 스크린샷을 참조하십시오.
Add Failure callback
메서드에 대한 규칙을 만듭니다
OTP가 값 111
과(와) 일치하지 않는 경우 오류 메시지를 표시하는 규칙을 만들어 보겠습니다.
-
실패 콜백 추가 를 클릭합니다.
-
문 추가 를 클릭하여 규칙을 만듭니다.
-
규칙의 When 섹션에 조건을 만듭니다.
-
함수 출력 > 이벤트 페이로드 가져오기 를 선택합니다.
-
입력 섹션에서 해당 바인딩을 선택합니다. 예를 들어 문자열 을(를) 선택하고
valid
을(를) 입력합니다. 입력한 문자열을false
과(와) 비교합니다. -
Then 섹션의 작업 선택 드롭다운 목록에서 표시 를 선택합니다. 예를들어
error message
텍스트 상자를 표시합니다. -
문 추가 를 클릭합니다.
-
작업 선택 드롭다운 목록에서 숨기기 를 선택합니다. 예를 들어
userdetails
패널을 숨깁니다. -
완료 를 클릭합니다.
사용자가 OTP를 123
(으)로 입력하고 Confirm
단추를 클릭하면 오류 메시지가 표시되는 아래 스크린샷을 참조하십시오.
아래 스크린샷에는 비동기 함수 호출 을 사용하여 비동기 함수를 구현하기 위한 전체 규칙이 표시됩니다.
비동기 함수 호출에 대한
성공 콜백 편집 및 실패 콜백 편집 을 클릭하여 콜백을 편집할 수도 있습니다.