핵심 구성 요소 기반 적응형 양식의 사용자 정의 함수 만들기

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

고려 사항

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

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

소프트웨어:

사용자 정의 함수 만들기

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

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

클라이언트 라이브러리 만들기 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

사용자 지정 함수를 사용하여 규칙 편집기에서 비동기 함수를 구현할 수 있습니다. 이 방법에 대한 자세한 내용은 문서 적응형 양식에서 비동기 기능 사용을 참조하세요.

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

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

범위 개체에 대한 자세한 내용은 사용자 지정 함수의 범위 개체 문서를 참조하십시오.

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

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

캐시를 지원하는

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

문제 해결

다음 단계

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

추가 참조