Part 2 of Listing Custom Asset Types in AEM Forms

Creating custom template

Part 1 is available here

For the purpose of this article, we will be creating a custom template to display the custom asset types and the OOTB asset types on the same page. To create custom template please follow the following instructions

  1. Create a sling: folder under /apps. Name it "myportalcomponent"
  2. Add a "fpContentType" property. Set its value to "/libs/fd/fp/formTemplate".
  3. Add a "title" property and set its value to "custom template". This is the name that you will see in the drop-down list of the Search and Lister Component
  4. Create a "template.html" under this folder. This file will hold the code to style and display the various asset types.
appsfolder_

The following code lists the various types of assets using the search and lister component. We create seperate html elements for each type of asset as shown by data-type = "videos" tag. For asset type of "videos" we use the <video> element to play the video inline. For asset type of "worddocuments"  we use different html mark up.

<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>

Note:

Line 11 - Please change the image src to point to an image of your choice in DAM.

To list Adaptive Forms in this template, create a new div and set its data-type attribute to "guide". You can copy and paste the div whose data-type="printForm and set the newly copied div's data-type to "guide"

Configure Search And Lister Component

Once we have defined the custom template, we now have to associate this custom template with the "Search and Lister" component. Point your browser to this url.

Switch to Design mode and configure the paragraph system to include Search And Lister component in the allowed components group. The Search and Lister component is part of the Document Services group.

Switch to edit mode and add the Search and Lister component to the ParSys.

 

Open the configuration properties of the "Search and Lister" component. Make sure the "Asset Folders" tab is selected. Select the folders from which you want to list the assets in the search and lister component. For the purpose of this article, I have selected

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

 

selectingassetfolders

Tab to the "Display" tab. Here you will choose the template that you want to display the assets in the search and lister component.

Select "custom template" from the drop-down as shown below.

SearchAndListerComponent

Configure the types of asset's that you want to list in the portal. To configure the types of asset's tab to the "Asset Listing" and configure the types of assets. In this example we have configure the following types of assets

  1. MP4 Files
  2. Word Documents
  3. Document(This is OOTB asset type)
  4. Form Template(This is OOTB asset type)

The following scren shot shows you the asset types that are configured for listing

assettypes

Now that you have configured your Search and Lister Portal Component, it is time to see the lister in action. Point your browser to this url. The results should be something like the image shown below.

Note:

If your portal is listing custom asset types on a publish server please make sure you give "read" permission to "fd-service" user to the node /apps/fd/fp/extensions/querybuilder

assettypeslistings

Download

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy