AEM Forms에서 사용자 지정 자산 유형 나열

사용자 지정 템플릿 만들기

이 문서의 목적에 따라 동일한 페이지에 사용자 지정 자산 유형과 OOTB 자산 유형을 표시하는 사용자 지정 템플릿을 만듭니다. 사용자 지정 템플릿을 만들려면 다음 지침을 따르십시오

1. 슬링 만들기:/apps 아래의 폴더. 이름을 " myportalcomponent " 로 지정합니다.
2. "fpContentType" 속성을 추가합니다. 값을 "/libs/fd/ fp/formTemplate"로 설정합니다.
3. "title" 속성을 추가하고 해당 값을 "사용자 지정 템플릿"으로 설정합니다. 검색 및 목록 구성 요소의 드롭다운 목록에 표시되는 이름입니다
4. 이 폴더 아래에 "template.html"을 만듭니다. 이 파일에는 스타일을 지정할 코드가 있으며 다양한 자산 유형을 표시합니다.

다음 코드는 검색 및 레지스트리 구성 요소를 사용하는 다양한 유형의 자산을 나열합니다. 데이터 유형 = "videos" 태그로 표시된 대로 각 자산 유형에 대해 별도의 html 요소를 만듭니다. "비디오"의 자산 유형의 경우, <video> 요소를 사용하여 비디오 인라인을 재생합니다. "worddocuments"의 자산 유형에는 다른 html 마크업을 사용합니다.

<div class="__FP_boxes-container __FP_single-color">
   <div  data-repeatable="true">
     <div class = "__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "videos">
   <video width="400" controls>
       <source src="${path}" type="video/mp4">
    </video>
         <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
     </div>
     <div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "worddocuments">
       <a href="/assetdetails.html${path}" target="_blank">
           <img src ="/content/dam/worddocuments/worddocument.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
          </a>
          <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
     </div>
  <div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "xfaForm">
       <a href="/assetdetails.html${path}" target="_blank">
           <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
          </a>
          <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
                <a href="{formUrl}"><img src="/content/dam/html5.png"></a><p>

     </div>
  <div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "printForm">
       <a href="/assetdetails.html${path}" target="_blank">
           <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
          </a>
          <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
                <a href="{pdfUrl}"><img src="/content/dam/pdf.png"></a><p>
     </div>
   </div>
</div>

검색 및 레지스트리 구성 요소 구성

사용자 지정 템플릿을 정의한 후에는 이제 이 사용자 지정 템플릿을 "검색 및 목록" 구성 요소와 연결해야 합니다. 브라우저 을 이 url 에 가리킵니다.

디자인 모드로 전환하고 허용된 구성 요소 그룹에 검색 및 목록 구성 요소를 포함하도록 단락 시스템을 구성합니다. 검색 및 목록 구성 요소는 문서 서비스 그룹의 일부입니다.

편집 모드로 전환하고 Search and Lister 구성 요소를 ParSys에 추가합니다.

검색 및 목록 구성 요소의 구성 속성을 엽니다. 자산 폴더 탭이 선택되어 있는지 확인합니다. 검색 및 목록 구성 요소에서 자산을 나열할 폴더를 선택합니다. 이 문서를 위해

• /content/dam/VideosAndWordDocuments
• /content/dam/formsanddocuments/assettypes

탭을 클릭하여 "표시" 탭을 표시합니다. 여기서는 검색 및 목록 구성 요소에 자산을 표시할 템플릿을 선택합니다.

아래 표시된 대로 드롭다운에서 "사용자 지정 템플릿"을 선택합니다.

포털에 나열할 자산 유형을 구성합니다. 자산의 탭 유형을 "자산 목록"에 구성하고 자산 유형을 구성하려면. 이 예에서는 다음 유형의 자산을 구성했습니다

1. MP4 파일
2. Word 문서
3. Document(OOTB 자산 유형)
4. 양식 템플릿(OOTB 자산 유형)

다음 화면에서는 목록에 대해 구성된 자산 유형을 보여줍니다

이제 검색 및 클러스터 포털 구성 요소를 구성했으므로 이제 레지스트리를 확인할 차례입니다. 브라우저 을 이 url 에 가리킵니다. 결과는 아래 표시된 이미지와 같아야 합니다.

자산 유형패키지 관리자를 사용하여 이 패키지를 다운로드하여 설치하십시오. 여기에는 검색 및 라이브러리 구성 요소를 사용하여 나열하는 자산 유형으로 사용되는 샘플 mp4 및 word 문서와 xdp 파일이 포함되어 있습니다