1. JS 파일의 비동기 작업에 대한 사용자 지정 함수 작성

노트

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 비동기 함수 호출 규칙 유형을 사용하여 비동기 함수를 사용할 규칙을 만듭니다.

비동기 작업을 사용할 규칙을 만들려면 비동기 함수 호출 규칙 유형을 사용하십시오. 다음 단계를 수행하십시오.

  1. 작성 모드에서 적응형 양식을 열고 양식 구성 요소를 선택한 다음 규칙 편집기 ​를 선택하여 규칙 편집기를 엽니다.
  2. 만들기 ​를 선택합니다.
  3. 단추 클릭에 대한 규칙의 When 섹션에 조건을 만듭니다. 예를 들어 When[Confirm] ​을 클릭합니다.
  4. Then 섹션의 작업 선택 드롭다운 목록에서 비동기 함수 호출 ​을 선택합니다.
    비동기 함수 호출 ​을(를) 선택하면 Promise 반환 형식의 함수가 나타납니다.
  5. 목록에서 비동기 함수를 선택합니다. 예를 들어 Add success callbackadd failure callback이(가) 나타나므로 matchOTP() 함수와 해당 콜백을 선택하십시오.
  6. 이제 입력 바인딩을 선택하십시오. 예를 들어 입력 ​을(를) Form Object(으)로 선택하고 OTP 필드와 비교합니다.

아래 스크린샷에는 규칙이 표시됩니다.

규칙 유형

이제 matchOTP 함수에 대한 콜백 SuccessFailure의 구현을 계속할 수 있습니다.

2.2 비동기 함수에 대한 콜백을 구현합니다

시각적 규칙 편집기를 사용하여 비동기 함수에 대한 성공 및 실패 콜백 메서드를 구현합니다.

Add Success callback 메서드에 대한 규칙을 만듭니다

OTP가 값 111과(와) 일치하는 경우 userdetails 패널을 표시하는 규칙을 만들어 보겠습니다.

  1. 성공 콜백 추가 ​를 클릭합니다.

  2. 문 추가 ​를 클릭하여 규칙을 만듭니다.

  3. 규칙의 When 섹션에 조건을 만듭니다.

  4. 함수 출력 > 이벤트 페이로드 가져오기 ​를 선택합니다.

    노트
    이벤트 페이로드 가져오기 함수는 사용자 상호 작용을 동적으로 관리하기 위해 특정 이벤트와 관련된 데이터를 검색합니다.
  5. 입력 섹션에서 해당 바인딩을 선택합니다. 예를 들어 문자열 ​을(를) 선택하고 valid을(를) 입력합니다. 입력한 문자열을 true과(와) 비교합니다.

  6. Then 섹션의 작업 선택 드롭다운 목록에서 표시 ​를 선택합니다. 예를 들어 userdetails 패널을 표시합니다.

  7. 문 추가 ​를 클릭합니다.

  8. 작업 선택 드롭다운 목록에서 숨기기 ​를 선택합니다. 예를들어 error message 텍스트 상자를 숨깁니다.

  9. 완료 ​를 클릭합니다.

성공 호출

사용자가 OTP를 111(으)로 입력하고 Confirm 단추를 클릭하면 User Details 패널이 표시되는 아래 스크린샷을 참조하십시오.

성공

Add Failure callback 메서드에 대한 규칙을 만듭니다

OTP가 값 111과(와) 일치하지 않는 경우 오류 메시지를 표시하는 규칙을 만들어 보겠습니다.

  1. 실패 콜백 추가 ​를 클릭합니다.

  2. 문 추가 ​를 클릭하여 규칙을 만듭니다.

  3. 규칙의 When 섹션에 조건을 만듭니다.

  4. 함수 출력 > 이벤트 페이로드 가져오기 ​를 선택합니다.

  5. 입력 섹션에서 해당 바인딩을 선택합니다. 예를 들어 문자열 ​을(를) 선택하고 valid을(를) 입력합니다. 입력한 문자열을 false과(와) 비교합니다.

  6. Then 섹션의 작업 선택 드롭다운 목록에서 표시 ​를 선택합니다. 예를들어 error message 텍스트 상자를 표시합니다.

  7. 문 추가 ​를 클릭합니다.

  8. 작업 선택 드롭다운 목록에서 숨기기 ​를 선택합니다. 예를 들어 userdetails 패널을 숨깁니다.

  9. 완료 ​를 클릭합니다.

실패 콜백 메서드

사용자가 OTP를 123(으)로 입력하고 Confirm 단추를 클릭하면 오류 메시지가 표시되는 아래 스크린샷을 참조하십시오.

실패

아래 스크린샷에는 비동기 함수 호출 ​을 사용하여 비동기 함수를 구현하기 위한 전체 규칙이 표시됩니다.

비동기 함수 호출에 대한 규칙

성공 콜백 편집실패 콜백 편집 ​을 클릭하여 콜백을 편집할 수도 있습니다.