핵심 구성 요소를 기반으로 적응형 양식에 대한 사용자 지정 기능 만들기

핵심 구성 요소를 기반으로 하는 적응형 Forms은 사용자 입력에 따라 콘텐츠 및 동작을 조정하여 다이내믹한 사용자 경험을 제공합니다. 사용자 정의 기능을 사용하면 개발자가 기능을 확장하여 양식이 특정 요구 사항을 충족할 수 있습니다. 개발자는 사용자 정의 기능을 통합하여 복잡한 논리를 구현하고 프로세스를 자동화하며 특정 비즈니스 요구 사항 또는 사용자의 기대에 부합하는 고유한 상호 작용을 도입할 수 있습니다. 양식이 다양한 조건에 적응할 뿐만 아니라 다양한 사용 사례에 대해 보다 정확하고 효과적인 솔루션을 제공하도록 보장합니다.
이 문서에서는 핵심 구성 요소를 사용하여 적응형 Forms에 대한 사용자 지정 기능을 만드는 단계를 안내합니다.

고려 사항

사용자 지정 함수를 만들기 위한 사전 요구 사항

적응형 Forms에 사용자 지정 기능을 추가하기 전에 다음을 확인하십시오.

소프트웨어:

사용자 정의 함수 만들기 create-custom-function

규칙 편집기에서 사용자 지정 함수를 호출할 클라이언트 라이브러리를 만듭니다. 자세한 내용은 클라이언트측 라이브러리 사용을 참조하십시오.

사용자 정의 함수를 만드는 단계는 다음과 같습니다.

클라이언트 라이브러리 만들기 create-client-library

클라이언트 라이브러리를 추가하여 사용자 정의 함수를 추가할 수 있습니다. 클라이언트 라이브러리를 만들려면 다음 단계를 수행하십시오.

리포지토리 복제

AEM Forms as a Cloud Service 리포지토리 복제:

이 명령은 저장소를 다운로드하고 시스템에 복제된 저장소의 로컬 폴더를 만듭니다. 이 안내서에서는 이 폴더를 [AEMaaCS 프로젝트 디렉터리] (으)로 참조합니다.

클라이언트 라이브러리 폴더 추가

새 클라이언트 라이브러리 폴더를 [AEMaaCS 프로젝트 디렉터리]에 추가하려면 다음 단계를 수행합니다.

클라이언트 라이브러리 폴더에 파일 및 폴더 추가

추가된 클라이언트 라이브러리 폴더에 다음을 추가합니다.

Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/

filter.xml에 새 폴더 포함:

새로 만든 클라이언트 라이브러리 폴더를 AEM 환경에 배포합니다

Cloud Service 환경에 AEM as a Cloud Service [AEMaaCS 프로젝트 디렉터리]를 배포합니다. Cloud Service 환경에 배포하려면 다음을 수행하십시오.

아직 파이프라인을 설정하지 않았다면 AEM Formsas a Cloud Service 에 대한 파이프라인 설정 방법에 대한 안내서를 참조하십시오.

파이프라인이 실행되면 클라이언트 라이브러리에 추가된 사용자 지정 함수를 적응형 양식 규칙 편집기에서 사용할 수 있게 됩니다.

적응형 양식에 클라이언트 라이브러리 추가 use-custom-function

클라이언트 라이브러리를 Forms CS 환경에 배포한 후에는 적응형 양식에서 해당 기능을 사용하십시오. 적응형 양식에 클라이언트 라이브러리를 추가하려면

JavaScript 주석을 사용하여 적응형 양식의 규칙 편집기에서 사용자 지정 함수를 사용할 수 있습니다.

적응형 양식에서 사용자 정의 함수 사용

적응형 양식에서는 규칙 편집기 내에서 사용자 지정 함수를 사용할 수 있습니다. JavaScript 파일(Function.js 파일)에 다음 코드를 추가하여 생년월일(YYYY-MM-DD)을 기준으로 연령을 계산합니다. 생년월일을 입력으로 취하여 연령을 반환하는 사용자 지정 함수를 calculateAge()(으)로 만듭니다.

    /**
        * Calculates Age
        * @name calculateAge
        * @param {object} field
        * @return {string}
    */

    function calculateAge(field) {
    var dob = new Date(field);
    var now = new Date();

    var age = now.getFullYear() - dob.getFullYear();
    var monthDiff = now.getMonth() - dob.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
    age--;
    }

    return age;
    }

위의 예에서 사용자가 생년월일을 형식(YYYY-MM-DD)으로 입력하면 사용자 지정 함수 calculateAge이(가) 호출되고 연령을 반환합니다.

이제 양식을 미리 보기하여 사용자 정의 함수가 규칙 편집기를 통해 어떻게 구현되는지 살펴보겠습니다.

사용자 정의 함수의 기능

AEM Forms의 사용자 지정 기능은 양식의 기능을 확장하고 개인화하는 강력한 솔루션을 제공합니다. 사용자 지정 함수를 사용하여 조직의 특정 요구 사항을 충족할 수 있습니다.

이러한 함수는 특정 필드 작업, 전역 필드 사용 및 비동기 작업, 캐싱 메커니즘 통합 등 다양한 기능을 지원합니다. 이러한 유연성으로 인해 양식이 복잡한 요구 사항에 맞게 조정되고 효율적이고 맞춤화된 사용자 경험을 제공할 수 있습니다. 이러한 고급 기능을 활용하면 양식 상호 작용을 강화하고 성능을 최적화하여 AEM 양식의 기능을 개선하고 반응성을 높일 수 있습니다.

사용자 정의 함수의 기능에 대해 자세히 살펴보겠습니다.

사용자 지정 함수에서의 비동기 지원 support-of-async-functions

비동기 사용자 지정 함수는 규칙 편집기 목록에 표시되지 않습니다. 그러나 동기 함수 표현식을 사용하여 만든 사용자 지정 함수 내에서 비동기 함수를 호출할 수 있습니다.

사용자 지정 함수를 사용하여 비동기 함수를 호출하는 방법은 아래 코드를 참조하십시오.

    async function asyncFunction() {
    const response = await fetch('https://petstore.swagger.io/v2/store/inventory');
    const data = await response.json();
    return data;
    }

    /**
    * callAsyncFunction
    * @name callAsyncFunction callAsyncFunction
    */
    function callAsyncFunction() {
    asyncFunction()
        .then(responseData => {
        console.log('Response data:', responseData);
        })
        .catch(error => {
         console.error('Error:', error);
    });
}

위의 예에서 asyncFunction 함수는 asynchronous function입니다. https://petstore.swagger.io/v2/store/inventory에 GET을(를) 요청하여 비동기 작업을 수행합니다. await을(를) 사용하여 응답을 기다리고 response.json()을(를) 사용하여 응답 본문을 JSON으로 구문 분석한 다음 데이터를 반환합니다. callAsyncFunction 함수는 asyncFunction 함수를 호출하고 콘솔에 응답 데이터를 표시하는 동기 사용자 지정 함수입니다. callAsyncFunction 함수는 동기식이지만 비동기 asyncFunction 함수를 호출하고 그 결과를 then 및 catch 문으로 처리합니다.

작동 여부를 확인하려면 단추를 추가하고 단추 클릭 시 비동기 함수를 호출하는 단추에 대한 규칙을 만들어 보겠습니다.

사용자가 Fetch 단추를 클릭하면 사용자 지정 함수 callAsyncFunction이(가) 호출되어 비동기 함수 asyncFunction이(가) 호출되는지 보여 주려면 아래 콘솔 창의 그림을 참조하십시오. Inspect 콘솔 창에서 버튼에 대한 응답을 봅니다. 클릭:

사용자 지정 함수에서 필드 및 전역 범위 개체 지원 support-field-and-global-objects

필드 개체는 텍스트 필드, 확인란 등 양식 내의 개별 구성 요소 또는 요소를 나타냅니다. Globals 개체에는 사용자 지정 함수 내에서 양식을 수정하는 방법, 대상 필드 인스턴스 및 양식 인스턴스와 같은 읽기 전용 변수가 포함되어 있습니다.

사용자 지정 함수에서 캐싱 지원

적응형 Forms은 규칙 편집기에서 사용자 지정 함수 목록을 검색하는 동안 응답 시간을 개선하기 위해 사용자 지정 함수에 대한 캐싱을 구현합니다. Fetched following custom functions list from cache(으)로 표시되는 메시지가 error.log 파일에 나타납니다.

캐시를 지원하는

사용자 지정 함수가 수정되면 캐싱이 무효화되고 구문 분석됩니다.

문제 해결

다음 단계

이제 핵심 구성 요소를 기반으로 하는 적응형 양식에 대한 다양한 사용자 지정 함수의 예를 살펴보겠습니다.

추가 참조