PDF Viewer Component for AEM (HTL)

pdfviewer.html

<div data-sly-test="${wcmmode.edit && !properties.pdfviewerFlag}" class="cq-placeholder" data-emptytext="PDF Viewer Component"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<div data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap>
		<div data-sly-call="${clientlib.all @ categories='myproject.pdfviewer'}" data-sly-unwrap></div>
			<div class="row">
                <input type="hidden" name="pdffile" id="pdffile" value="${properties.pdffile}"/>
                    <input type="hidden" name="title" id="title" value="${properties.title || currentPage.title || pageProperties.jcr:title}"/>
                <input type="hidden" name="viewmode" id="viewmode" value="${properties.inline}"/>
                    <div class="col-sm-12" id="adobe-dc-view" style="height:900px; text-align:center">
                    <br/>
                        Drag & Drop a PDF File in this space.
                        <br/>
                    <br/>
                        You can also use AEM Dialog to select a PDF file.
            	</div>
            </div>
</div>