HTML 및 CSS 작업 지식
AEM Forms 사용자 인터페이스를 사용하여 모든 양식에 메타데이터를 추가할 수 있습니다. 사용자 지정 메타데이터를 사용하면 조직의 양식을 나열하고 검색하는 동안 사용자 경험을 향상시킬 수 있습니다.
Forms Portal에서는 양식 목록에 사용자 정의 메타데이터를 사용할 수 있습니다. 자산에 대한 사용자 정의 템플릿을 만드는 동안 레이아웃을 수정하고 CSS 스타일 세트에 사용자 정의 메타데이터를 사용할 수 있습니다.
다양한 Forms Portal 구성 요소에 대한 사용자 정의 템플릿을 만들려면 다음 단계를 수행하십시오.
*/apps 아래에 sling:Folder 노드 만들기 *
"fpContentType" 속성을 추가합니다. 사용자 지정 템플릿을 정의하는 구성 요소에 따라 속성에 적절한 값을 지정합니다.
검색 및 라이브러리 구성 요소:"/libs/fd/fp/formTemplate"
초안 및 제출 구성 요소:
링크 구성 요소:/libs/fd/fp/linkTemplate
레이아웃 템플릿을 선택할 때 표시할 제목을 추가합니다.
*참고:제목은 사용자가 만든 sling:Folder의 노드 이름과 다를 수 있습니다. *
다음 이미지는 검색 및 작성자 구성 요소의 구성을 보여 줍니다.
이 폴더에 사용자 지정 템플릿 역할을 할 template.html 파일을 만듭니다.
사용자 지정 템플릿을 작성하고 아래에 설명된 대로 사용자 지정 메타데이터를 사용합니다.
다음은 Forms Portal에서 검색 및 라이브러리 구성 요소에 대한 사용자 정의 Geometrixx Gov 카드 레이아웃을 가져오는 사용자 정의 템플릿의 샘플 구현입니다.
<div class="__FP_boxes-container __FP_single-color">
<div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
<div class="__FP_boxes-thumbnail">
<img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
</div>
<h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
<p>${description}</p>
<div class="boxes-icon-cont __FP_boxes-icon-cont">
<div class="op-dow">
<a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">${localize-Apply}</a>
<a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">${localize-Download}</a>
</div>
</div>
</div>
</div>
모든 Forms Portal 구성 요소에 대한 사용자 정의 템플릿에는 반복 가능한 항목과 반복되지 않는 항목이 포함됩니다. 반복 가능한 항목은 나열할 기본 엔티티입니다. 반복 가능한 항목의 예는 검색 및 목록, 초안 및 제출, 링크 구성 요소입니다.
Forms Portal에서는 자리 표시자가 사용자 지정/OOTB 메타데이터를 표시하는 구문을 제공합니다. 양식, 초안 또는 제출 결과를 표시한 후 자리 표시자가 채워집니다.
반복 가능한 항목을 포함하려면 data-repeable 특성의 값을 true로 구성합니다.
*설명한 예에서 사용자 지정 템플릿의 맨 위에 2개의 Div 요소가 있습니다. "__FP_boxes-container" CSS 클래스가 있는 첫 번째 클래스는 나열된 양식의 컨테이너 요소로 작동합니다. "__FP_boxes" CSS 클래스가 있는 두 번째 항목은 기본 엔티티에 대한 템플릿입니다(이 경우 Form). Div 요소에 있는 data-repeable 속성에는 true 값이 있습니다.
각 자리 표시자에는 전용 OTB 메타데이터 세트가 있습니다. 양식의 특정 위치에 사용자 지정 메타데이터를 표시하려면 해당 위치에 $metadata_prop 속성을 추가합니다.
이 예제에서 메타데이터 속성은 여러 인스턴스에서 사용됩니다. 예를 들어description,name,formUrl,htmlStyle,pdfUrl,pdfStyle및 <a a12/>경로에 지정된 방식으로
다양한 Forms Portal 구성 요소는 나열을 위해 사용할 수 있는 전용 OTB 메타데이터 세트를 제공합니다.
제목: 양식의 제목
이름:양식의 이름(주로 제목과 동일함)
설명:양식 설명
formUrl:양식을 HTML로 렌더링할 URL
pdfUrl:양식을 PDF로 렌더링할 URL
assetType:자산의 유형입니다. 유효한 값에는 양식, PDF 양식, 인쇄 양식 및 적응형 양식 등이 있습니다.
htmlStyle & pdfStyle:렌더링에 각각 사용되는 HTML 및 PDF 아이콘의 표시 스타일입니다. 유효한 값은 "__FP_display_none" 또는 blank입니다.
참고:사용자 정의 스타일 시트에서 __FP_display_none 클래스를 사용해야 합니다
downloadUrl:자산을 다운로드할 URL입니다.
사용자 인터페이스에서 구성 속성의 현지화, 정렬 및 사용 지원(검색 및 목록에만 해당):
현지화 지원:정적 텍스트를 현지화하려면 속성 ${localize-YOUR_TEXT} 을 사용하고 아직 현지화된 값이 없는 경우 지역화된 값을 사용할 수 있도록 하십시오.
설명한 예에서 ${localize-Apply} 및 ${localize-Download} 속성은 적용 및 다운로드 텍스트를 현지화하는 데 사용됩니다.
정렬 지원:HTML 요소를 클릭하여 검색 결과를 정렬합니다. 관련 레이아웃에서 정렬을 구현하려면 특정 테이블 머리글에 "data-sortKey" 특성을 추가하십시오. 또한 값을 정렬할 메타데이터로 추가합니다.
예를 들어 격자 보기의 "Title" 헤더의 경우 "data-sortKey" 헤더의 값은 "title"입니다. 제목을 클릭하여 특정 열의 값을 정렬합니다.
구성 속성 사용:검색 및 작성자 구성 요소에는 사용자 인터페이스에서 사용할 수 있는 여러 구성이 있습니다. 예를 들어 편집 대화 상자를 통해 저장된 HTML 도구 설명 텍스트를 표시하려면 ${config-htmlLinkText} 특성을 사용합니다.마찬가지로 PDF 도구 설명 텍스트의 경우${config-pdfLinkText} 특성을 사용합니다.
메모:
초안 및 제출 구성 요소의 [초안] 섹션에 있는 삭제 옵션에 대해 CSS 클래스 이름을 "__FP_deleteDraft"로 지정합니다. 또한 해당 초안의 초안 ID인 ${draftID} 값과 함께 "draftID" 특성을 포함하십시오.
열린 초안 및 제출물에 대한 링크를 만드는 동안 앵커 태그에 대한 href 속성의 값으로 $path.html을(를) 지정할 수 있습니다.
A. 컨테이너 요소
각 양식에 대해 저장된 축소판을 가져오기 위해 고정 계층 구조의 B."경로" 메타데이터를 사용합니다.
C. 각 양식에 대해 템플릿 섹션에 사용되는 데이터 반복 가능 속성
D. "적용" 문자열을 현지화하려면
E.구성 속성 pdfLinkText 사용
"pdfUrl" 메타데이터 사용