설명서AEM 6.5사용 안내서

Form BridgeHTML 과 Form 5 Forms에 대한 사용자 정의 포털 통합 integrating-form-bridge-with-custom-portal-for-html-forms

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

작성 대상:

  • 관리자
  • 사용자
  • 개발자

FormBridge는 양식과 상호 작용할 수 있는 HTML5 Forms Bridge API입니다. FormBridge API 참조에 대해서는 FormBridge API 참조를 참조하십시오.

FormBridge API를 사용하여 HTML 페이지에서 양식 필드의 값을 가져오거나 설정하고 양식을 제출할 수 있습니다. 예를 들어 API를 사용하여 마법사와 같은 경험을 빌드할 수 있습니다.

기존 HTML 애플리케이션은 FormBridge API를 사용하여 양식과 상호 작용하여 HTML 페이지에 포함할 수 있습니다. 다음 단계를 사용하여 Form Bridge API를 사용하여 필드의 값을 설정할 수 있습니다.

웹 페이지에 HTML5 양식 통합 integrating-html-forms-to-a-web-page

  1. 프로필 선택 또는 프로필 만들기

    1. CRX DE 인터페이스에서 https://'[server]:[port]'/crx/de(으)로 이동합니다.

    2. 관리자 자격 증명으로 로그인합니다.

    3. 프로파일을 생성하거나 기존 프로파일을 선택합니다.

      프로필을 만드는 방법에 대한 자세한 내용은 프로필 만들기를 참조하십시오.

  2. HTML 프로필 수정

    프로필 렌더러에 XFA 런타임, XFA 로케일 라이브러리 및 XFA 양식 HTML 코드 조각을 포함하고 웹 페이지를 디자인하고 웹 페이지 내에 양식을 배치합니다.

    예를 들어, 다음 코드 조각을 사용하여 두 개의 입력 필드와 양식이 있는 앱을 만들어 양식과 외부 앱 간의 상호 작용을 보여 줍니다.

    code language-xml 
    <%@ page session="false"
               contentType="text/html; charset=utf-8"%><%
%><%@ taglib prefix="cq" uri="https://www.day.com/taglibs/cq/1.0" %><%
%><!DOCTYPE html>
<html manifest="${param.offlineSpec}">
    <head>
       <cq:include script="formRuntime.jsp"/>
        <!-- Portal Scripts and Styles -->
       <cq:include script="portalheader.jsp"/>
    </head>
    <body>
        <div id="leftdiv" >
            <div id="leftdivcontentarea">
                <!-- Portal Body -->
              <cq:include script="portalbody.jsp"/>
            </div>
        </div>
        <div id="rightdiv">
            <div id="formBody">
            <cq:include script="config.jsp"/>
            <!-- Form body -->
            <cq:include script="formBody.jsp"/>
            <!  --To assist in page transitions -- add navigation, based on scrolling -->
            <cq:include  script="../nav/scroll/nav_footer.jsp"/>
            <cq:include script="footer.jsp"/>
            </div>
        </div>
    </body>
</html>
    note note
    NOTE
    줄 9 ​에는 페이지를 디자인할 CSS 스타일과 JavaScript 파일에 대한 추가 JSP 참조가 포함되어 있습니다.
    행 18 ​의 <div id="rightdiv"> 태그에 XFA 형식의 HTML 코드 조각이 포함되어 있습니다.
    페이지는 left 및 right 컨테이너의 두 가지 스타일로 디자인되었습니다. 오른쪽 컨테이너에는 양식이 있습니다. 왼쪽 컨테이너에는 두 개의 입력 필드와 외부 HTML 페이지의 일부가 있습니다.
    다음 스크린샷은 브라우저에 양식이 표시되는 방식을 보여 줍니다.

    포털

    왼쪽은 HTML 페이지 ​의 일부입니다. 필드가 포함된 오른쪽은 xfa 양식 ​입니다.

  3. 페이지에서 양식 필드 액세스

    다음은 양식 필드에서 값을 설정하기 위해 추가할 수 있는 샘플 스크립트입니다.

    예를들어 필드 이름 및 성 ​의 값을 사용하여 EmployeeName ​을(를) 설정하려면 window.formBridge.setFieldValue 함수를 호출합니다.

    마찬가지로 window.formBridge.getFieldValue API를 호출하여 값을 읽을 수 있습니다.

    code language-javascript 
    $(function() {
            $(".input").blur(function() {
                window.formBridge.setFieldValue(
                            'xfa.form.form1.#subform[0].EmployeeName',
                             $("#lname").val()+' '+$("#fname").val()
                           )
                });
        });
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2